• 0

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

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

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

هل من مساعدة؟

 <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>

 

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


رابط هذه المساهمة
  • 3

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

أضيف اسم ال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);
   
    }

 

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

1 شخص أعجب بهذا

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


رابط هذه المساهمة
  • 2

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

بدلا من : 

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

اجعله فقط 


   clicked.push( val );

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

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

تمّ تعديل بواسطة Aboelabbas Shahwan
1 شخص أعجب بهذا

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


رابط هذه المساهمة
  • 1

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

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/

1 شخص أعجب بهذا

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


رابط هذه المساهمة
  • 1
بتاريخ 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/

تمّ تعديل بواسطة Aboelabbas Shahwan
1 شخص أعجب بهذا

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


رابط هذه المساهمة
  • 1
<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);
  }
  
}())

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

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


رابط هذه المساهمة
  • 0

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

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

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

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++;

 

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


رابط هذه المساهمة
  • 0
بتاريخ 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/

1 شخص أعجب بهذا

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


رابط هذه المساهمة
  • 0

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

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

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


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

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

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

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

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


رابط هذه المساهمة
  • 0

 

بتاريخ 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/

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

 

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

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


رابط هذه المساهمة
  • 0
بتاريخ منذ ساعة مضت قال 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) وفي النهاية نتحصل على المجموع الصحيح, عملية الجمع في الكود صديقي لا تعطيني جمع صحيح. لست ادري اذا فهمتني بشكل واضح على العموم اشكرك على المساعدة فهي مفيدة جدا بارك الله فيك

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


رابط هذه المساهمة
  • 0
بتاريخ 5 ساعات قال Aboelabbas Shahwan:

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

بدلا من : 


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

اجعله فقط 



   clicked.push( val );

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

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

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

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


رابط هذه المساهمة
  • 0
بتاريخ 23 دقائق مضت قال salah sea:

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

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

1 شخص أعجب بهذا

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


رابط هذه المساهمة

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن