0

Estoy intentando sumar dos inputs y no se puedo.

Estoy tratando de imprimirlo en la consola para luego pasarlo al otro input el resultado pero cuando trato de sumar los dos inputs me da este código en la consola "NaN"

function Suma() {
    var suma = parseInt(document.getElementsByTagName("Sumar").value);
    var suma2 = parseInt(document.getElementsByTagName("Sumar2").value);
    var resultado = parseInt(suma) + parseInt(suma2);
    console.log(resultado); 
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <span >
            <input type="text" style="width: 65px;" name="Sumar" >
            <input type="text" style="width: 65px;" name="Sumar2" >
            <button type="button" onclick="Suma()">Sumar</button>
            <input type="text" style="width: 65px;" name="ResultadoSuma" placeholder="Resultado">
        </span> 
    </div>
    
    <script src="index.js"></script>
</body>
</html>

4 respuestas 4

1

La verdad no logro determinar tu error. Creo que es porque tomas los valores de tus inputs a través de getElementsTagName y esto retorna un array de colecciones de los atributos con esos tags. Así que deberías hacer algo como: document.getElementsByTagName("Sumar")[0].value y ahí sí podrías acceder a su valor, pero es solo por intuición lo que te digo. Igual te dejo la solución a tu problema en el siguiente snippet:

const value1 = document.getElementById('value1');
const value2 = document.getElementById('value2');
const sumar = document.getElementById('sumar');
let resultado = document.getElementById('resultado');

sumar.addEventListener('click', () => {
  let v1 = parseInt(value1.value)
  let v2 = parseInt(value2.value)
  
  console.log(v1+v2)
  
  resultado.value = v1 + v2;
});
<input id="value1">
<input id="value2">
<button id="sumar">Sumar</button>
<input id="resultado" value="">

2
  • Gracias! pensaba que era lo mismo si usaba el "name" o "id"
    – Jonathan
    Commented el 14 abr. 2021 a las 16:22
  • No, no son iguales en realidad. Siempre estate atento a ese tipo de cosas. Igual fue un placer ayudarte.
    – gaidyjg
    Commented el 14 abr. 2021 a las 16:57
0

Te recomiendo que identifiques a tus inputs mediante id de la forma:

<input type="text" style="width: 65px;" id="Sumar" >

Y en JavaScript los leas mediante:

document.getElementById("Sumar").value

De esa forma tu código quedaría de la siguiente forma:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <span >
            <input type="text" style="width: 65px;" id="Sumar" >
            <input type="text" style="width: 65px;" id="Sumar2" >
            <button type="button" onclick="Suma()">Sumar</button>
            <input type="text" style="width: 65px;" id="ResultadoSuma" placeholder="Resultado">
        </span> 
    </div>
    
    <script>
    function Suma() {
        
    var suma = parseInt(document.getElementById("Sumar").value);
    var suma2 = parseInt(document.getElementById("Sumar2").value);
    var resultado = parseInt(suma) + parseInt(suma2);
    document.getElementById("ResultadoSuma").value = resultado;
    console.log(resultado); 
    }

</script>
</body>
</html>

0

El problema es que estás usando el selector equivocado, getElementsByTagName() es para seleccionar elementos por el nombre de etiqueta por ejemplo div o input, lo que debes usar es getElementsByName, si quieres seleccionar por medio del atributo name, por otro lado, si usas getElementsByName, esto retorna una colección de elementos que tengan ese name, lo recomendable es usar getElementById que solo retorna un elemento, te dejo un ejemplo:

function Suma() {
    var suma = parseInt(document.getElementsByName("Sumar")[0].value);
    var suma2 = parseInt(document.getElementsByName("Sumar2")[0].value);
    
    var suma_id = parseInt(document.getElementById("Sumar").value);
    var suma2_id = parseInt(document.getElementById("Sumar2").value);
    
    var resultado = parseInt(suma) + parseInt(suma2);
    var resultado2 = parseInt(suma_id) + parseInt(suma2_id);
    console.log('Este resultado es usando getElementByName: '+resultado);
    console.log('Este resultado es usando getElementById: '+resultado2);
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <span >
            <input type="text" style="width: 65px;" name="Sumar" id="Sumar">
            <input type="text" style="width: 65px;" name="Sumar2" id="Sumar2">
            <button type="button" onclick="Suma()">Sumar</button>
            <input type="text" style="width: 65px;" name="ResultadoSuma" placeholder="Resultado">
        </span> 
    </div>
    
    
</body>
</html>

1
  • Gracias! no pensé que la solución solo era eso, ando aprendiendo entonces estoy practicando y cosas así, Gracias! nuevamente
    – Jonathan
    Commented el 14 abr. 2021 a las 16:20
0

Problemas:

  1. La funcion getElementsByTagName la estas empleando incorrectamente, porque en realidad no estas seleccionando el "name" del input, sino un tag(un elemento html como: <input>, <p>, <ul>, etc), como dice su nombre "ByTagName".

  2. Si quisieras seleccionar aun por el "nombre", deberias utilizar la funcion getElementsByName, que esta si selecciona los elementos por "nombre".

    En el siguiente ejemplo estoy seleccionando el valor de los inputs por "name", si te das cuenta pongo un "[0].value", esto es porque la funcion retorna coleccion de lista de todos los "name" que existen

function Valores() {
  var input1 = document.getElementsByName('Sumar')[0].value;
  var input2 = document.getElementsByName('Sumar2')[0].value;
  console.log(input1 + ' - ' + input2);
}
<input type="text" style="width: 65px;" name="Sumar">
<input type="text" style="width: 65px;" name="Sumar2">

<button onclick="Valores()">Valores</button>

Solucion:

Lo recomendable y optimo es que selecciones por id, utilizando getElementById para que obtengas el valor del elemento "input" y hacer tus respectivas operaciones

function Suma() {
  var suma = parseInt(document.getElementById("input1").value);
  var suma2 = parseInt(document.getElementById("input2").value);
  var resultado = suma + suma2;
  document.getElementById("Resultado").value = resultado;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>
    <span>
            <input type="text" style="width: 65px;" name="Sumar" id="input1">
            <input type="text" style="width: 65px;" name="Sumar2" id="input2">
            <button type="button" onclick="Suma()">Sumar</button>
            <input type="text" style="width: 65px;" name="ResultadoSuma" placeholder="Resultado" id="Resultado">
        </span>
  </div>

  <script src="index.js"></script>
</body>

</html>

Extra

Ademas de lo anterior dicho, veo tambien que utilizas 2 veces parseInt, lo cual esta mal, ya que con solo una vez basta

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.