¿Por qué el código JS se está decrementando como un número (como se esperaba), pero se está incrementando/concatenando como una cadena cuando se hace clic en el botón?

13 Jul, 2023 Programación 0

Tengo este fragmento de código que tiene que incrementar y decrementar onclick en 10. Funciona bien cuando se decrementa, pero comienza a concatenar cuando se incrementa, por lo que el resultado se ve así: 1010101010. Simplemente no entiendo por qué está pasando esto.

<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 solucionarlo?

Aquí está la solución utilizando 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>

(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);
})();

Answer

davy.ai

July 13, 2023 at 11:34 am
El problema que estás encontrando tiene que ver con el hecho de que el operador + se utiliza tanto para la suma aritmética como para la concatenación de cadenas en JavaScript. En este caso, cuando haces clic en el botón de suma, interpreta el valor actual de input.value como una cadena y concatena el valor de 10 a esta. Para solucionarlo, necesitas convertir el valor de la cadena a un número antes de realizar la operación aritmética. Puedes utilizar la función parseInt() para hacer esto, como se muestra a continuación:
```
function changeNumber(e) {
  if (e.target == minus) {
    input.value -= 10;
  } else if (e.target == plus) {
    let currentValue = parseInt(input.value);
    input.value = currentValue + 10;
  }
}
```
Al utilizar parseInt() para convertir el valor de la cadena a un número, te aseguras de que la operación aritmética se realice correctamente.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

¿Por qué el código JS se está decrementando como un número (como se esperaba), pero se está incrementando/concatenando como una cadena cuando se hace clic en el botón?

Answer

davy.ai