I have a html like the below,
<input class="btn btn-primary button1" type="button" value="0">
<input class="btn btn-primary button2" type="button" value="0">
<input class="btn btn-primary button3" type="button" value="0">
<input class="btn btn-primary button4" type="button" value="0">
There can be any number of buttons in the HTML.
But, though the number of buttonsin the HTML increases, I cannot write everytime in the JS like the below,
$(".button1").click(function() {
buttonVal(this);
});
$(".button2").click(function() {
buttonVal(this);
});
$(".button3").click(function() {
buttonVal(this);
});
...... for button 4 and so on....
//Single function
function buttonVal(ele)
{
var v = +$(ele).attr('value');
$(ele).attr('value', v > 2 ? 0 : v + 1);
}
Each buttons Value will be 0 initially.
When each button is clicked the values will be increased by 1 and When the value reaches 3, again cliking the button after 3. The Value should become 0.
The same condition applies for all the newly added buttons.
I need a single function, that supports any number of buttons when added, instead of adding each button to the click event in the JS and not by calling their classes explicitly.
Could someone please help?
Many thanks.
Just try like this
$(".btn").click(function() {
buttonVal(this);
});
function buttonVal(ele)
{
var v = +$(ele).attr('value');
$(ele).attr('value', v > 2 ? 0 : v + 1);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="btn btn-primary button1" type="button" value="0">
<input class="btn btn-primary button2" type="button" value="0">
<input class="btn btn-primary button3" type="button" value="0">
<input class="btn btn-primary button4" type="button" value="0">loop over the buttons and add the event listener for each one
let btns = document.querySelectorAll(".btn")
btns.forEach(x => {
x.addEventLisetner("click", () => {
buttonVal(x);
})
})
this is pure js, so no need for jquery here
<input class="btn btn-primary button" type="button" value="0">
<input class="btn btn-primary button" type="button" value="0">
<input class="btn btn-primary button" type="button" value="0">
<input class="btn btn-primary button" type="button" value="0">
$(".button").click(function() {
buttonVal(this);
});
function buttonVal(ele)
{
var v = +$(ele).attr('value');
$(ele).attr('value', v > 2 ? 0 : v + 1);
}
U work in good condition, but you overwrite the code.