Leer números de entradas con JavaScript siempre devuelve NaN

Question

Quiero crear una calculadora que simplemente sume 2 campos. Pero lo que sea que intente, no funciona. También devuelve "NaN", también si uso parseInt().

Aquí está el código:

<script type="text/javascript" language="Javascript"> 
function doSum() 
{ 
var a = document.getElementsByName("a").value; 
var b = document.getElementsByName("b").value; 

var sum = a + b; 

document.getElementById("sum").value = sum; 
} 
</script> 

<form action="" method="POST"> 
<br/>a:<br/> 
<input type="text" name="a" onblur='doSum()' value="0" size="5" /> 
<br/>b:<br/> 
<input type="text" name="b" onblur='doSum()' value="0" size="5" /> 
<br/>Ergebnis<br/> 
<input type="text" id='sum' value='' size="50" disabled/> 
</form> 

Lo siento por esa pregunta noob, pero lo que I'am haciendo mal? ¡Gracias por cualquier ayuda!

Answer 1

Dale id s de las entradas, y los identifican de forma única mediante document.getElementById. Luego, obtenga sus valores decimales int usando parseInt con el radix parameter establecido en 10 y visualice el resultado como lo hace actualmente.

<script type="text/javascript" language="Javascript"> 
function doSum() 
{ 
    var a = parseInt(document.getElementById("a").value, 10); 
    var b = parseInt(document.getElementById("b").value, 10); 

    var sum = a + b; 

    document.getElementById("sum").value = sum; 
} 
</script> 

<form action="" method="POST"> 
<br/>a:<br/> 
<input type="text" id="a" onblur='doSum()' value="0" size="5" /> 
<br/>b:<br/> 
<input type="text" id="b" onblur='doSum()' value="0" size="5" /> 
<br/>Ergebnis<br/> 
<input type="text" id='sum' value='' size="50" disabled/> 
</form> 

getElementsByName devuelve una lista de elementos y que tendría que hacer referencia a la que desea a través de un índice, incluso si la lista contiene sólo un elemento.

getElementById por el contrario, devuelve un elemento identificado de forma única, por su id.

Answer 2

usa getElementById y dale a cada uno de ellos una Id. getElementsByName devuelve una matriz. Por cierto ... no es una mala pregunta. Es un error común, uno que se aborda de alguna manera mediante el uso de jQuery que trata en conjuntos envueltos.

Answer 3

campos en JavaScript son todos cadenas que necesita int, también .getElementsByName devuelve una matriz, es probable que tenga el primer elemento, por lo que:

var a = parseInt(document.getElementsByName("a")[0].value, 10); 
var b = parseInt(document.getElementsByName("b")[0].value, 10); 

Answer 4

a y b son cuerdas para:

function doSum() 
{ 
var a = parseInt(document.getElementsByName("a").value); 
var b = parseInt(document.getElementsByName("b").value); 

var sum = a + b; 

document.getElementById("sum").value = sum; 
} 

Answer 5

getElementsByName devuelve varios elementos, de ahí el plural Elements. Es necesario para obtener la propiedad del primer elemento que se encuentra:

var a = document.getElementsByName('a')[0].value; 

getElementsByName devuelve un NodeList: este es un conjunto de todos los elementos que se encuentran con ese nombre. Es como una matriz en la que puede usar índices numéricos (como [0]) para acceder a los elementos encontrados y en que hay una propiedad length; no hay otra funcionalidad tipo array disponible.

---

Además, la propiedad value siempre será una cadena si se establece. El operador + es el operador adicional cuando los valores son números; si son cadenas, es el operador de concatenación. "1" + "2" es igual a "12" en Javascript. Es necesario utilizar parseInt para convertirlos en números:

var a = document.getElementsByName('a')[0].value; 
a = parseInt(a, 10); // parse as a number in base 10 

Answer 6

getElementsByTagName devuelve un node list:

function doSum() 
{ 
    var a = document.getElementsByName("a")[0].value; 
    var b = document.getElementsByName("b")[0].value; 

    var sum = parseInt(a, 10) + parseInt(b, 10); 

    document.getElementById("sum").value = sum; 
} 

por lo que necesitará para indexarlo. Además, para no hacer una concatenación de cuerdas, se necesita parseInt with radix 10. A menos que planee aceptar valores octales en su calculadora.

Answer 7

getElementsByName devuelve una matriz que le proporciona el tipo de datos incorrecto para lo que está intentando hacer.

intento:

function doSum() 
{ 
    var a = document.getElementById("a").value; 
    var b = document.getElementById("b").value; 

    var sum = a + b; 

    document.getElementById("sum").value = sum; 

} 
</script> 

<form action="" method="POST"> 
<br/>a:<br/> 
<input id="a" type="text" name="a" onblur='doSum()' value="0" size="5" /> 
<br/>b:<br/> 
<input id="b" type="text" name="b" onblur='doSum()' value="0" size="5" /> 
<br/>Ergebnis<br/> 
<input type="text" id='sum' value='' size="50" disabled/> 
</form> 

Answer 8

OK, dos problemas, su a buscar los valores de a y b utilizando getElementsByName que devuelve una matriz de valores (ya que podría haber muchos). Use getElementsById y ponga identificadores en el HTML.

También las propiedades de valor serán cadenas, por lo que deberá convertir a números antes de hacer su adición.