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
You have used v[ele.id] = { intVal: res }, definitely switch will not work with 0,1,2 Use res in switch
switch(res)
You don't really need to use array for that use case. You can just use .each and populate the index as text:
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>Your fixed code
Logic
innerHTMLinnerHTML value.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>