如何重置功能？

Question

 var count = 0; var change = function(btn) { count++ var color = ""; switch(count) { case 1: color = "#ef2715"; break; case 2: color = "#ef8c14"; break; case 3: color = "#efd514"; break; case 4: color = "#3fef14"; break; case 5: color = "#145def"; break; case 6: color = "#093b9e"; break; case 7: color = "#6414ef"; break; default: color = "#6414ef"; break; } btn.style.background = color; } 

 button { border: 1px solid black; width: 50px; height: 50px; float: left; } 

 <button id="one" onclick="change(this)"></button> <button id="one" onclick="change(this)"></button> <button id="one" onclick="change(this)"></button> <button id="one" onclick="change(this)"></button> <button id="one" onclick="change(this)"></button> <button id="one" onclick="change(this)"></button> <button id="one" onclick="change(this)"></button> <button id="one" onclick="change(this)"></button> 

I want to make some kind of drawing canvas. If you click a button once, the color will be red and if you click twice the color will be orange. And this function has to be reset ('count' should be reset) when you click another button.

However, the function count stays even if I click another button. How can I solve this problem?

(Is it necessary for me to make 50 buttons if I want my canvas to be 2500px? Or is there any easier/shorter way to make buttons? )

Thank you

Answer 1

Try this approach. It provides separate counters for all of your buttons.

var change = function(btn) {
  if(!btn.hasOwnProperty('myCount')) {
    btn.myCount = 0;
  }
  btn.myCount++;
  var color = "";
  switch(btn.myCount) {
    case 1: 
      color = "#ef2715";
      break;
    // ...
  }
  btn.style.background = color;
}

Each counter is being stored right on the button object.

UPD The shorter version is

var change = function(btn) {
  btn.myCount = !btn.myCount ? 1 : btn.myCount + 1;
  var color = "";
  // ...
}

Answer 2

One of the ways of doing so would be to set a custom attribute on each button - such as "data-count" which keeps track of color index for that button.

Thus when you click on the button, you can increment this count - and save it back to the data-count attribute.

See the snippet below to see how you could implement this:

 var change = function(btn) { let count = btn.attributes["data-count"] ? parseInt(btn.attributes["data-count"].value) : 0; count++; var color = ""; switch (count) { case 1: color = "#ef2715"; break; case 2: color = "#ef8c14"; break; case 3: color = "#efd514"; break; case 4: color = "#3fef14"; break; case 5: color = "#145def"; break; case 6: color = "#093b9e"; break; case 7: color = "#6414ef"; break; default: color = "#6414ef"; break; } btn.style.background = color; btn.setAttribute("data-count", count); } 

 button { border: 1px solid black; width: 50px; height: 50px; float: left; } 

 <button onclick="change(this)"></button> <button onclick="change(this)"></button> <button onclick="change(this)"></button> <button onclick="change(this)"></button> <button onclick="change(this)"></button> <button onclick="change(this)"></button> <button onclick="change(this)"></button> <button onclick="change(this)"></button> 

Also, you can reset the counter based on a condition, such as count == 7 - if required.

Answer 3

Elements in DOM are not prefered to be having same identity and below code works on Id which holds a logic when a continuous click happens to same button and resets for other

  var count =0; var tempButtonId=""; var change = function(btn) { if(btn.id!=tempButtonId) { tempButtonId=btn.id; count=1; }else{ count++ } var color = ""; switch(count) { case 1: color = "#ef2715"; break; case 2: color = "#ef8c14"; break; case 3: color = "#efd514"; break; case 4: color = "#3fef14"; break; case 5: color = "#145def"; break; case 6: color = "#093b9e"; break; case 7: color = "#6414ef"; break; default: color = "#6414ef"; break; } btn.style.background = color; } 

 button { border: 1px solid black; width: 50px; height: 50px; float: left; } 

 <button id="one" onclick="change(this)"></button> <button id="two" onclick="change(this)"></button> <button id="three" onclick="change(this)"></button> <button id="four" onclick="change(this)"></button> <button id="five" onclick="change(this)"></button> <button id="six" onclick="change(this)"></button> <button id="seven" onclick="change(this)"></button> <button id="eight" onclick="change(this)"></button>