طلب مساعدة في جافا سكريبت

salah sea · 6 مايو 2017

السلام عليكم الاخوة الاعضاء لدي طلب عندكم للمساعدة في جافا سكريبت بتقنية لم أعرف كيف أنجزها. وهي كالتالي:

لدي خمسة أزرار بقيم مختلفة بالشكل التالي و ما ارغب في الحصول عليه بالجافا سكريبت اخوتي هو عندما يتم الضغط على الازرار بشكل عشوائي عشرة مرات ,نقوم في النهاية بجمع قيم الازرار التي ثم الضغط عليها .

هل من مساعدة؟

 <p id="demo"></p>
<div class="mydiv">
<button id="ziroa" value="1">BUTTON ONE</button><br>
<button id="zirob" value="2">BUTTON TWO</button><br>
<button id="ziroc" value="3">BUTTON THREE</button><br>
<button id="zirod" value="4">BUTTON FORE</button><br>
<button id="ziroe" value="5">BUTTON FIVE</button><br>
</div>

Rima Ibrahim · 6 مايو 2017

السلام عليكم ورحمة الله وبركاته

أضيف اسم الfunction للزر

<button id="ziroa" value="1" onclick="myClick();">BUTTON ONE</button><br>
<button id="zirob" value="2" onclick="myClick();">BUTTON TWO</button><br>
<button id="ziroc" value="3" onclick="myClick();">BUTTON THREE</button><br>
<button id="zirod" value="4" onclick="myClick();">BUTTON FORE</button><br>
<button id="ziroe" value="5" onclick="myClick();">BUTTON FIVE</button><br>

في جافا سكربت :

var countClick = 0;

var buttona=document.getElementById("ziroa").value ;
var buttonb=document.getElementById("zirob").value ;
var buttonc=document.getElementById("ziroc").value ;
var buttond=document.getElementById("zirod").value ;
var buttone=document.getElementById("ziroe").value ;

 function myClick() { 
                countClick++;
   if(countClick == 10)
     alert('clicked 10 times, sum is:' buttona+buttonb+buttonc+buttond+buttone);
   
    }

إن شاء الله تظبط لأن ماجربت الكود.

aboelabbas · 7 مايو 2017

افترضت انك تريد جمع القيم بدون تكرار، يمكنك تغيير هذا

بدلا من :

 if ( ! clicked.includes( val ) ) {
   clicked.push( val );
 }

اجعله فقط


   clicked.push( val );

مثال بعد التعديل:

https://jsfiddle.net/dawnbirth/68azmmkh/3/

تم التعديل في 7 مايو 2017 بواسطة Aboelabbas Shahwan

aboelabbas · 6 مايو 2017

أظن هذا ما تريده:

HTML

<p id="demo"></p>
<div class="mydiv">
<button class="summed" value="1" onclick="countFunc()">BUTTON ONE</button><br>
<button class="summed" value="2" onclick="countFunc()">BUTTON TWO</button><br>
<button class="summed" value="3" onclick="countFunc()">BUTTON THREE</button><br>
<button class="summed" value="4" onclick="countFunc()">BUTTON FOUR</button><br>
<button class="summed" value="5" onclick="countFunc()">BUTTON FIVE</button><br>
</div>

JavaScript

/*
* First create a function to sum values of buttons.
* Buttons are supplied to the function as an array of objects 'els'.
*/
function sumValues( els ) {
  var sum = 0;
  for( var i = 0; i < els.length; i++ ) {
    sum += Number( els[i].value );
  }
  return sum;
}
/*
* The second function counts the clicks and when cnt == 10; it
* uses sumValues() to sum and print the result in #demo elements.
*/
var cnt = 0;
function countFunc(){
 cnt++;
 if ( cnt == 10 ) {
   var demo  = document.getElementById( 'demo' );
   var els   = document.getElementsByClassName( 'summed' );
   var total = sumValues( els );
   demo.innerHTML = 'Total Sum = ' + total ;
 }
}

مثال يعمل:

https://jsfiddle.net/dawnbirth/a0t5a7wx/1/

aboelabbas · 7 مايو 2017

بتاريخ 59 دقائق مضت قال salah sea:

اخي اوبو العباس الله يعطيك الصحة هذا هو المطلوب لكن هناك مشكلة بسيطة هي أن الناتج دائما يساوي 15

ذلك لان الدالة تقةوم بجمع جميع القيم بغض النظر عن الازرار التي تم الضغط عليها.

لجمع قيم الازرار التي تم الضغط عليها سنقوم مثلا بعمل متغير جديد نسجل فيه قيم الازرار التي تم الضغط عليها فقط ثم نقوم بجمعهم:

HTML

<p id="demo"></p>
<div class="mydiv">
<button class="summed" value="1" onclick="countFunc(this)">BUTTON ONE</button><br>
<button class="summed" value="2" onclick="countFunc(this)">BUTTON TWO</button><br>
<button class="summed" value="3" onclick="countFunc(this)">BUTTON THREE</button><br>
<button class="summed" value="4" onclick="countFunc(this)">BUTTON FOUR</button><br>
<button class="summed" value="5" onclick="countFunc(this)">BUTTON FIVE</button><br>
</div>

JavaScript

/*
* A function to sum values of an array.
*/
function sumValues( arr ) {
  var sum = 0;
  for( var i = 0; i < arr.length; i++ ) {
    sum += Number( arr[i] );
  }
  return sum;
}
/*
* The second function counts the clicks and when cnt == 10; it
* uses sumValues() to sum and print the result in #demo elements.
* The clicked element must be passed to the function 'el'.
*/
var cnt = 0; // Store clicks count.
var clicked = []; // Store values of the clicked elements only.

function countFunc( el ){
 cnt++;
 var val = Number( el.value );
 if ( ! clicked.includes( val ) ) {
   clicked.push( val );
 }

 if ( cnt == 10 ) {

   var demo  = document.getElementById( 'demo' );
   var total = sumValues( clicked );
   demo.innerHTML = 'Total Sum = ' + total + '. You clicked ' + clicked.length + ' button(s)';

   //Reset counter and clicked elements.
   cnt = 0;
   clicked = [];
 }

}

مثال يعمل :

https://jsfiddle.net/dawnbirth/68azmmkh/

تم التعديل في 7 مايو 2017 بواسطة Aboelabbas Shahwan

Sdddfdf Sgdgdsgfd · 1 يونيو 2017

<p id="demo"></p>
<div class="mydiv">
<button class="summed" value="1" onclick="countFunc()">BUTTON ONE</button><br>
<button class="summed" value="2" onclick="countFunc()">BUTTON TWO</button><br>
<button class="summed" value="3" onclick="countFunc()">BUTTON THREE</button><br>
<button class="summed" value="4" onclick="countFunc()">BUTTON FOUR</button><br>
<button class="summed" value="5" onclick="countFunc()">BUTTON FIVE</button><br>
</div>


(function(){
    var myElementDiv =  document.getElementById('mydiv');
    
  
  
  //هذه الذلة تقوم بإنشاء الأزرار حدد عدد الأزرار في btnNum
  // وترجع اراي مخزن فيها الأزرار
 var createBtns = function(btnNum){
     var btnArray = [];
     for(var i = 0; i <= btnNum ; i++){
       var btnrec = document.CreateElement("button");
        btnrec.value = i + 1;
        btnArray.push(btnrec);
     }
       return btnArray;
  }
  
  // الأن قم بعمل لوب اخر لكي تنشأ الأزرار
  for(var b = 0;b<=createBtns().length;b++){
    // قم بإنشاء الأزرار داخل الديف الخاص بك
      myElementDiv.appendChild(createBtns(5)[i]);
    
   createBtns(5)[i].addEventListener("click",
  function(){
    //استجدم this لكي تتعرف على الزر التي ثم الضغط عليه 
     alert("Clicked on" + btnArray()[i]);
  }
  ,false);
  }
  
}())

لم اجرب لكن الفكرة واضحة بالتوفيق

salah sea · 6 مايو 2017

شكرا اختي ريما على الرد, لكن للأسف لم يشتغل الكود.

انا كنت عامل دالة للأزرار بالشكل التالي,والفكرة هي بأن ادمج الدالتين بحيث عنذ كل ضغطة يتم حدثين. تغيير المعلومات من المصفوفة وحفظ قيمة الزر حتى النهاية من اجل جمع كل قيم الازرار كما ذكرت فوق.

اذا كانت طريقة اختي ريما اكون شاكر جدا

var contor = 0;
    myziroa = document.getElementById("ziroa");
    myziroe = document.getElementById("ziroe");
    myzirod = document.getElementById("zirod");
    myziroc = document.getElementById("ziroc");
    myzirob = document.getElementById("zirob");
	myprint = document.getElementById("demo");
    myinfo =["info1","info2","info3","info4","info5","info6","info7","info8","info9","info10","your ruselt now is :"];
myziroa.onclick = function(){mydemo.innerHTML = myinfo[contor++];};
myzirob.onclick = function(){mydemo.innerHTML = myinfo[contor++];};
myziroc.onclick = function(){mydemo.innerHTML = myinfo[contor++];};
myzirod.onclick = function(){mydemo.innerHTML = myinfo[contor++];};
myziroe.onclick = function(){mydemo.innerHTML = myinfo[contor++];};
contor++;

سالم يسلم · 6 مايو 2017

بتاريخ 28 دقائق مضت قال salah sea:
شكرا اختي ريما على الرد, لكن للأسف لم يشتغل الكود.

انا كنت عامل دالة للأزرار بالشكل التالي,والفكرة هي بأن ادمج الدالتين بحيث عنذ كل ضغطة يتم حدثين. تغيير المعلومات من المصفوفة وحفظ قيمة الزر حتى النهاية من اجل جمع كل قيم الازرار كما ذكرت فوق.

اذا كانت طريقة اختي ريما اكون شاكر جدا
var contor = 0;
    myziroa = document.getElementById("ziroa");
    myziroe = document.getElementById("ziroe");
    myzirod = document.getElementById("zirod");
    myziroc = document.getElementById("ziroc");
    myzirob = document.getElementById("zirob");
	myprint = document.getElementById("demo");
    myinfo =["info1","info2","info3","info4","info5","info6","info7","info8","info9","info10","your ruselt now is :"];
myziroa.onclick = function(){mydemo.innerHTML = myinfo[contor++];};
myzirob.onclick = function(){mydemo.innerHTML = myinfo[contor++];};
myziroc.onclick = function(){mydemo.innerHTML = myinfo[contor++];};
myzirod.onclick = function(){mydemo.innerHTML = myinfo[contor++];};
myziroe.onclick = function(){mydemo.innerHTML = myinfo[contor++];};
contor++;

هل يمكنك التوضيح أكثر ؟

وارفاق مثال هنا https://jsfiddle.net/

salah sea · 6 مايو 2017

اخي xlm ماهو الشيء الغمض بالنسبة لك حتى استيطع التوضيح .لاني وضعت الفكرة باكملها في السؤال واتممتها في الرد على الاخت ريما . وبالنسبة للموقع اسف عزيزي لا اجيد العمل عليه اول مرة اشوفو

تم التعديل في 6 مايو 2017 بواسطة salah sea
اضافة

سالم يسلم · 6 مايو 2017

بتاريخ منذ ساعة مضت قال salah sea:

اخي xlm ماهو الشيء الغمض بالنسبة لك حتى استيطع التوضيح .لاني وضعت الفكرة باكملها في السؤال واتممتها في الرد على الاخت ريما . وبالنسبة للموقع اسف عزيزي لا اجيد العمل عليه اول مرة اشوفو

هل هذا الحل صحيح ؟

https://jsfiddle.net/xlmnxp/vssy9qya/

salah sea · 7 مايو 2017

بتاريخ 11 ساعات قال xlmnxp only:

بتاريخ 11 ساعات قال Aboelabbas Shahwan:

أظن هذا ما تريده:

HTML


<p id="demo"></p>
<div class="mydiv">
<button class="summed" value="1" onclick="countFunc()">BUTTON ONE</button><br>
<button class="summed" value="2" onclick="countFunc()">BUTTON TWO</button><br>
<button class="summed" value="3" onclick="countFunc()">BUTTON THREE</button><br>
<button class="summed" value="4" onclick="countFunc()">BUTTON FOUR</button><br>
<button class="summed" value="5" onclick="countFunc()">BUTTON FIVE</button><br>
</div>

JavaScript


/*
* First create a function to sum values of buttons.
* Buttons are supplied to the function as an array of objects 'els'.
*/
function sumValues( els ) {
  var sum = 0;
  for( var i = 0; i < els.length; i++ ) {
    sum += Number( els[i].value );
  }
  return sum;
}
/*
* The second function counts the clicks and when cnt == 10; it
* uses sumValues() to sum and print the result in #demo elements.
*/
var cnt = 0;
function countFunc(){
 cnt++;
 if ( cnt == 10 ) {
   var demo  = document.getElementById( 'demo' );
   var els   = document.getElementsByClassName( 'summed' );
   var total = sumValues( els );
   demo.innerHTML = 'Total Sum = ' + total ;
 }
}

مثال يعمل:

https://jsfiddle.net/dawnbirth/a0t5a7wx/1/

اخي اوبو العباس الله يعطيك الصحة هذا هو المطلوب لكن هناك مشكلة بسيطة هي أن الناتج دائما يساوي 15

(Total Sum = 15) مهما ضغطت على ازرار مختلفة؟ هل من حل عزيزي؟

بتاريخ 11 ساعات قال xlmnxp only:

هل هذا الحل صحيح ؟

https://jsfiddle.net/xlmnxp/vssy9qya/

اخي اكس ال ام هذا الحل قمت به, أنظر جواب الاخ اوبو العباس وتعليقي عليه لتكون في الصورة معنا صديقي العزيز .مشكور على المشاركة

تم التعديل في 7 مايو 2017 بواسطة salah sea
اضافة

salah sea · 7 مايو 2017

بتاريخ منذ ساعة مضت قال Aboelabbas Shahwan:

ذلك لان الدالة تقةوم بجمع جميع القيم بغض النظر عن الازرار التي تم الضغط عليها.

لجمع قيم الازرار التي تم الضغط عليها سنقوم مثلا بعمل متغير جديد نسجل فيه قيم الازرار التي تم الضغط عليها فقط ثم نقوم بجمعهم:

HTML


<p id="demo"></p>
<div class="mydiv">
<button class="summed" value="1" onclick="countFunc(this)">BUTTON ONE</button><br>
<button class="summed" value="2" onclick="countFunc(this)">BUTTON TWO</button><br>
<button class="summed" value="3" onclick="countFunc(this)">BUTTON THREE</button><br>
<button class="summed" value="4" onclick="countFunc(this)">BUTTON FOUR</button><br>
<button class="summed" value="5" onclick="countFunc(this)">BUTTON FIVE</button><br>
</div>

JavaScript


/*
* A function to sum values of an array.
*/
function sumValues( arr ) {
  var sum = 0;
  for( var i = 0; i < arr.length; i++ ) {
    sum += Number( arr[i] );
  }
  return sum;
}
/*
* The second function counts the clicks and when cnt == 10; it
* uses sumValues() to sum and print the result in #demo elements.
* The clicked element must be passed to the function 'el'.
*/
var cnt = 0; // Store clicks count.
var clicked = []; // Store values of the clicked elements only.

function countFunc( el ){
 cnt++;
 var val = Number( el.value );
 if ( ! clicked.includes( val ) ) {
   clicked.push( val );
 }

 if ( cnt == 10 ) {

   var demo  = document.getElementById( 'demo' );
   var total = sumValues( clicked );
   demo.innerHTML = 'Total Sum = ' + total + '. You clicked ' + clicked.length + ' button(s)';

   //Reset counter and clicked elements.
   cnt = 0;
   clicked = [];
 }

}

مثال يعمل :

https://jsfiddle.net/dawnbirth/68azmmkh/

صديقي بدل سطر الامر الاخير

" ;(demo.innerHTML = 'Total Sum = ' + total + '. You clicked ' + clicked.length + ' button(s"

اكتفيت فقط بطباعة المجموع كالتالي "demo.innerHTML = total"

ملاحظة "

اذا نظرنا إلى الازرار الخمسة كأنها ازرار الة حاسبة بحيث نقوم بعملية الجمع لعشرة ارقام بشكل عشوائي مثلا (1+3+5+4+2+1+5+3+4+5 = 33) وفي النهاية نتحصل على المجموع الصحيح, عملية الجمع في الكود صديقي لا تعطيني جمع صحيح. لست ادري اذا فهمتني بشكل واضح على العموم اشكرك على المساعدة فهي مفيدة جدا بارك الله فيك

salah sea · 7 مايو 2017

بتاريخ 5 ساعات قال Aboelabbas Shahwan:
افترضت انك تريد جمع القيم بدون تكرار، يمكنك تغيير هذا

بدلا من :
 if ( ! clicked.includes( val ) ) {
   clicked.push( val );
 }
اجعله فقط
   clicked.push( val );
مثال بعد التعديل:

https://jsfiddle.net/dawnbirth/68azmmkh/3/

الحقيقة مش عارف كيف اشكرك, كل التقدير, الله يحفظك

سالم يسلم · 7 مايو 2017

بتاريخ 23 دقائق مضت قال salah sea:

الحقيقة مش عارف كيف اشكرك, كل التقدير, الله يحفظك

تستطيع تقيمة بافضل اجابة لتفيدة

عابر سبيل2 · 19 يناير 2019

السلام عليكم ورحمة الله وبركاته

هل يمكن عمل نفس الطريقة على ازرار radio

ibraheem eltayfe · 28 يناير 2019

بتاريخ On ٦‏/٥‏/٢٠١٧ at 12:55 قال salah sea:


<button name="1" onclick='c(this.name)'>First</button>
<button name="2" onclick='c(this.name)'>Second</button>
<button name="3" onclick='c(this.name)'>Third</button>
<button name="4" onclick='c(this.name)'>Fourth</button>
<button name="5" onclick='c(this.name)'>Fifth</button>


function c(a){
  var E = document.getElementsByTagName("button")[a-1];

console.log(E.getAttribute("name"));

}

اقتباس

لو حاجة وقفت معاك قولى

طلب مساعدة في جافا سكريبت

السؤال

رابط هذا التعليق

شارك على الشبكات الإجتماعية

15 أجوبة على هذا السؤال

Recommended Posts

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على