Carlos Carranza

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.