Problemas:
La funcion getElementsByTagName la estas empleando incorrectamente, porque en realidad no estas seleccionando el "name" del
input
, sino untag
(un elemento html como:<input>, <p>, <ul>, etc
), como dice su nombre "ByTagName".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