Tengo este fragmento de código que tiene que incrementar y disminuir al hacer onclick en 10. Funciona bien cuando se reduce, pero comienza a concatenar cuando se incrementa, por lo que el resultado es 1010101010 . Simplemente no entiendo por qué sucede esto.

JS

 <div class="container"> <div class="input-container"> <div id="minus">-</div> <input type="text" id="number" value="0"> <div id="plus">+</div> </div> </div>

HTML

 (function(){ let inputContainer = document.querySelector(".input-container"); let input = inputContainer.firstElementChild.nextElementSibling; let minus = inputContainer.firstElementChild; let plus = inputContainer.lastElementChild; function changeNumber(e) { if(e.target === minus) { input.value -= 10; } else if(e.target === plus) { input.value += 10; } } inputContainer.addEventListener("click", changeNumber); })();

¿Cómo puedo arreglarlo?

¡Aquí está la solución usando parseInt() !

HTML

 <div class="container"> <div class="input-container"> <div id="minus">-</div> <input type="text" id="number" value="0"> <div id="plus">+</div> </div> </div>

JS

 (function(){ let inputContainer = document.querySelector(".input-container"); let input = inputContainer.firstElementChild.nextElementSibling; let minus = inputContainer.firstElementChild; let plus = inputContainer.lastElementChild; function changeNumber(e) { if(e.target == minus) { let inputNumber = parseInt(input.value); input.value = inputNumber - 10; } else if(e.target == plus) { let inputNumber = parseInt(input.value); input.value = inputNumber + 10; } } inputContainer.addEventListener("click", changeNumber); })();