Hello,
I'm having issues trying to set up custom input number arrows, I'm currently learning JavaScript so I'm not really sure what I'm missing, here is my code.
HTML
<div class="orden">
<label for="pase por dia">Boletos deseados: </label>
<div class="caja_ticket">
<input type="number" min="0" id="test" size="3" placeholder="0" class="ticket">
<div class="botones_ticket">
<input type="button" id="pase_dia_mas" value="+">
<input type="button" id="pase_dia_menos" value="-">
</div>
</div>
</div>
JavaScript
I have 3 input with the id = test so to save some code I decided to use a querySelectorAll('#test') to get an array of them, and then when I click the button I want to call the function "mas1"
var test = document.querySelectorAll('#test');
var paseDiaMas = document.querySelector('#pase_dia_mas');
paseDiaMas.addEventListener('click', mas1(event, 0));
function mas1(event, e) {
event.preventDefault();
let test_value = e;
test[test_value].stepUp(1);
console.log('it works');
}
however when I try to pass the values it doesn't works, if I remove the variables "test_value" and "e" and add a fixed value like "test[0]" it works:
I also wonder why when I remove the event.preventDefault() function it runs once when I open the page even if I don't click at the button.