1

estoy practicando Javascript y html y cuando quiero hacer un input del tipo "number" con dos variables(numeros) a la hora de usar javascript no me da el resultado correcto y me lanza: "NaN" Utilizo boostrap para los botones y fondo, el boton sumar tendría que arrojar el resultado de los dos numeros en el input sumados. El boton restar no hace nada por ahora.

const spanResultadoCuenta = document.getElementById('spanResultado')
var numUno = document.getElementById('num_uno').value;
var numDos = document.getElementById('num_dos').value;
const btnSumar = document.getElementById('sumar');
var resultado = 0;

btnSumar.addEventListener('click', () => {

    
spanResultadoCuenta.textContent = Number(numUno)+Number(numDos);



} )
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Botones sumadores y restadores</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<body>
    
    <div class="container py-5 bg-warning text-center">
         <label for="num_uno" id="num_uno">Numero Uno</label>
        <input type="number">
        <label for="num_dos" id="num_dos">Numero Dos</label>
        <input type="number">

        <button class="btn btn-info" id="sumar">
            Sumar
        </button>
        <button class="btn btn-danger" id="restar">
            Restar
        </button>
        <h4 class="my-5">Resultado: <span id=spanResultado>0</span></h4>

        <script src="scriptboton.js"></script>

    </div>



</body>
</html>

2 respuestas 2

5

Tienes dos problemas:

  1. Estás usando el id para la etiqueta (label), tienes que usarlo en el input.
  2. Cuando haces var numUno = document.getElementById('num_uno').value; estas guardando en numUno el valor de tu elemento input con el que se cargó la página, no con el valor actual que corresponde al de cada vez que el usuario lo cambia, te recomiendo guardar la referencia al elemento, así: var numUno = document.getElementById('num_uno') y luego puedes acceder al valor actual del elemento de tipo input haciendo numUno.val.

Con estas correcciones te quedaría algo así:

const spanResultadoCuenta = document.getElementById('spanResultado')
var numUno = document.getElementById('num_uno');
var numDos = document.getElementById('num_dos');
const btnSumar = document.getElementById('sumar');
var resultado = 0;

btnSumar.addEventListener('click', () => {


  spanResultadoCuenta.textContent = Number(numUno.value) + Number(numDos.value);



})
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Botones sumadores y restadores</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>

<body>

  <div class="container py-5 bg-warning text-center">
    <label for="num_uno">Numero Uno</label>
    <input type="number" id="num_uno">
    <label for="num_dos">Numero Dos</label>
    <input type="number" id="num_dos">

    <button class="btn btn-info" id="sumar">
            Sumar
        </button>
    <button class="btn btn-danger" id="restar">
            Restar
        </button>
    <h4 class="my-5">Resultado: <span id=spanResultado>0</span></h4>

    <script src="scriptboton.js"></script>

  </div>



</body>

</html>

Entiendo que el código puede mejorarse, pero quiero que comprendas porqué no estás obteniendo el comportamiento esperado.

1
  • 1
    Muchas gracias, es correcto y ahora entiendo el comportamiento.
    – Ketzell
    Commented el 30 dic. 2020 a las 7:30
0

El boton restar no te hace nada, porque deberias crear otra función para tal fin. Algo que estuve leyendo y aplicaré en mis futuros códigos es mantener el archivo js en el head, solo hay que usar defer, para diferir la carga js después de que cargue el html.

const spanResultadoCuenta = document.getElementById('spanResultado')
var numUno = document.getElementById('num_uno');
var numDos = document.getElementById('num_dos');
const btnSumar = document.getElementById('sumar');
const btnRestar = document.getElementById('restar');
const btnMultiplicar = document.getElementById('multiplicar');
const btnDividir = document.getElementById('dividir');
var resultado = 0;

btnSumar.addEventListener('click', () => {

  spanResultadoCuenta.textContent = Number(numUno.value) + Number(numDos.value);

})
btnRestar.addEventListener('click', () => {

  spanResultadoCuenta.textContent = Number(numUno.value) - Number(numDos.value);

})
btnMultiplicar.addEventListener('click', () => {

  spanResultadoCuenta.textContent = Number(numUno.value) * Number(numDos.value);

})
btnDividir.addEventListener('click', () => {

  spanResultadoCuenta.textContent = Number(numUno.value) / Number(numDos.value);

})
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Botones sumadores y restadores</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
  <script defer src="archivo.js"></script>
</head>

<body>

  <div class="container py-5 bg-warning text-center">
    <label for="num_uno">Numero Uno</label>
    <input type="number" id="num_uno">
    <label for="num_dos">Numero Dos</label>
    <input type="number" id="num_dos">

    <button class="btn btn-info" id="sumar">
      Sumar +
    </button>
    <button class="btn btn-danger" id="restar">
      Restar -
    </button>
    <button class="btn btn-info" id="dividir">
      Dividir /
    </button>
    <button class="btn btn-danger" id="multiplicar">
      Multiplicar x
    </button>
    <h4 class="my-5">Resultado: <span id=spanResultado>0</span></h4>


  </div>



</body>

</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.