اذهب إلى المحتوى

السؤال

نشر

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

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

هل من مساعدة؟

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

 

Recommended Posts

  • 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
نشر

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

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
نشر (معدل)
بتاريخ 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
نشر
<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/

  • 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
نشر
بتاريخ 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"));

}
اقتباس

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

 

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...