I have a HTML like the below,
<input class="btn btn-primary" id ="b1" type="button" value="Blue">
<input class="btn btn-primary" id ="b2" type="button" value="orange">
<input class="btn btn-primary" id ="b3" type="button" value="green">
I don't want to take the value from the HTML. Like the below,
$(#b1).attr('value') or
var val = document.getElementById(ele.id).value;
Instead, I need the value from the JS.
The default Value for each button should be 0. When I click the button each time, ++default value. When it reaches 3, again it should move to 0.
Like,
default value = default Value >= 3 ? 0 : ++defaultValue
$("button").click(function () {
buttonVal(this);
});
function buttonVal(ele) {
var def = [];
def = def>=3 ? 0 : ++def;
switch(def)
{
case 0:
def = 5;
break;
case 1 :
def = 4;
break;
default:
def = 0;
}
}
But, I used switch case to get the default value.
This line def = def>=3 ? 0 : ++def;is executed before the switch.
So, It didnt work.
Can we implement in different ways other than switch to get the default value ?
I need to store the default value in the JS.
Could anyone please help?
Many thanks.
Use the button's dataset to store the value.
$("button").click(function () {
let currentValue = this.dataset.value || 0;
if (++currentValue > 3) { currentValue = 0; }
this.dataset.value = currentValue;
...
});
Considering your button id as key to store count number
const container = document.getElementById("btn-container");
const btnValue = {};
container.addEventListener("click", function(e){
// const v = e.target.value;
if(e.target.tagName.toLowerCase() === "input"){
const v = e.target.id;
btnValue[v] = !btnValue[v] ? 1 : btnValue[v]==3 ? 0 : btnValue[v]+1;
// Uncommment below code to show value on button
// e.target.value=btnValue[v];
}
console.log(btnValue);
});<div id="btn-container">
<input class="btn btn-primary" id ="b1" type="button" value="Blue">
<input class="btn btn-primary" id ="b2" type="button" value="orange">
<input class="btn btn-primary" id ="b3" type="button" value="green">
</div>