How to use the Values from JS, instead of taking the value from the HTML?-CodePudding

I have 3 buttons like the below,

 <button id="b1">0</button>
 <button  id="b2">0</button>
 <button  id="b3">0</button>

Instead of getting/ reading the value from the HTML, I need to store the value in the JS.

Each buttons, on click should be incremented by 1, when it reaches 3, again it should become 0.

The values [0, 1, 2, 3] should be from JS and not from HTML.

I used switch case to show If the value is "0" the color is "red", If the value is 1, the color is "blue", if the value is 2, the color is "green", If the value is 3, the color is "pink".

I tried the below code, but the switch is not working. It displays the default line of code.

$("button").click(function () {
  buttonVal(this);
});

function buttonVal(ele) {
  var v = [];
  var val =  document.getElementById(ele.id).innerHTML;
  var res = val >= 3 ? 0 : val   1;
  v[ele.id] = { intVal: res };
  var colors = ["red", "blue", "green", "yellow", "cyan"];
  var randColor = colors[Math.floor(Math.random() * colors.length)];
  switch (v[ele.id]) {
    case "0":
    return document.getElementById(ele.id).innerHTML = "red";

    case "1":
      return document.getElementById(ele.id).innerHTML = "blue";
     
     case "2":
       return document.getElementById(ele.id).innerHTML = "green"; 

    default:
      return document.getElementById(ele.id).innerHTML = "no";
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="b1">0</button>
 <button  id="b2">0</button>
 <button  id="b3">0</button>

How to make the code to work ?

I need an array to store the values of (0 ,1, 2, 3).

Could someone please help?

Many thanks

CodePudding user response：

You have used v[ele.id] = { intVal: res }, definitely switch will not work with 0,1,2 Use res in switch

switch(res)

CodePudding user response：

You don't really need to use array for that use case. You can just use .each and populate the index as text:

Edit

Added an array instead of index.

let btns = [0,1,2];

$("button").click(function () {
  buttonVal(this);
});


$('button').each(function(index,ele){
  $(ele).text( btns[index] );
});

function buttonVal(ele) {
  
  var val = $(ele).text();
  var colors = ["red", "blue", "green", "yellow", "cyan"];
  var randColor = colors[Math.floor(Math.random() * colors.length)];
  switch (val) {
    case "0":
    return document.getElementById(ele.id).innerHTML = "red";

    case "1":
      return document.getElementById(ele.id).innerHTML = "blue";
     
     case "2":
       return document.getElementById(ele.id).innerHTML = "green"; 

    default:
      return document.getElementById(ele.id).innerHTML = "no";
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="b1">0</button>
 <button  id="b2">0</button>
 <button  id="b3">0</button>

CodePudding user response：

Your fixed code

Logic

Get the button innerHTML
Check the value, if its 3 make it 0, or else increment it.
correct the colors array, so that it holds the value that you needs on each innerHTML value.
Update the style.backgroundColor for the innerHTML value.

$("button").click(function () {
  buttonVal(this);
});

function buttonVal(ele) {
  var val =  document.getElementById(ele.id).innerHTML;
  val = val === 3 ? 0 :   val;
  document.getElementById(ele.id).innerHTML =  val;
  var colors = ["red", "blue", "green", "pink"];
  switch (val) {
    case 0:
      document.getElementById(ele.id).style.backgroundColor = colors[0];
      break;

    case 1:
      document.getElementById(ele.id).style.backgroundColor = colors[1];
      break;

    case 2:
      document.getElementById(ele.id).style.backgroundColor = colors[2];
      break;

    default:
      document.getElementById(ele.id).style.backgroundColor = colors[3];
      break;
  }
}

<button id="b1">0</button>
<button id="b2">0</button>
<button id="b3">0</button>

For this particular solution you dont need to have a switch case. You could just keep your colors array proper. You are handling the innerHTML logic correctly, so just access the values from colors array.

$("button").click(function () {
  buttonVal(this);
});

function buttonVal(ele) {
  let val =  document.getElementById(ele.id).innerHTML;
  var colors = ["red", "blue", "green", "pink"];
  val = val === 3 ? 0 :   val;
  document.getElementById(ele.id).innerHTML =  val;
  document.getElementById(ele.id).style.backgroundColor = colors[val];
}

<button id="b1">0</button>
<button id="b2">0</button>
<button id="b3">0</button>

CodePudding user response：

You are declaring the array inside the function, so it gets initialized each time you execute it. It's better to take it out the function so it can save the variables. For this case as you are summing variables is better to convert variables to Integer using parseInt().

Take a look to the following snippet:

$("button").click(function () {
  buttonVal(this);
});

var v = [];

function buttonVal(ele) {
  var val = parseInt(document.getElementById(ele.id).innerHTML);
  var res = val >= 3 ? 0 : val   1;
  v[ele.id] = res;
  var colors = ["red", "blue", "green", "yellow", "cyan"];
  var randColor = colors[Math.floor(Math.random() * colors.length)];
 switch (res) {
    case 0:
          document.getElementById(ele.id).style.background = randColor;
           document.getElementById(ele.id).innerHTML = res;
           break;
    case 1:
      document.getElementById(ele.id).style.background = randColor;
      document.getElementById(ele.id).innerHTML = res;
      break;
     
     case 2:
       document.getElementById(ele.id).style.background = randColor; 
        document.getElementById(ele.id).innerHTML = res;
        break;
        
    case 3:
       document.getElementById(ele.id).style.background = randColor; 
        document.getElementById(ele.id).innerHTML = res;
        break;    
        
    default:
      document.getElementById(ele.id).innerHTML = "no";
      document.getElementById(ele.id).innerHTML = res;
      break;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="b1">0</button>
 <button  id="b2">0</button>
 <button  id="b3">0</button>