Quiero crear un formulario donde realizaré una operación con los valores ingresados por el usuario, pero cuando se ejecuta la función, obtengo un retorno de NaN. Gracias por adelantado por la ayuda.
function test() { var age = document.getElementsByName("person_age").value; var weight = document.getElementsByName("person_weight").value; var size = document.getElementsByName("person_size").value; document.getElementById("result").innerHTML = weight + size + age; } <form> <input type="text" name="person_age"> <input type="text" name="person_size"> <input type="text" name="person_weight"> <input type="button" value="calculate" onclick="test();"> </form> <h3 id="result"></h3>`Producción:
Yaya
Cuando obtengo los valores del usuario y ejecuto la función, recibo comentarios de NaN. Como puedó resolver esté problema.
Hay múltiples errores que tienes que corregir.
1) Cuando use getElementsByName , devolverá una matriz NodeList como una colección. Por lo tanto, debe obtener el elemento utilizando el index como:
var age = document.getElementsByName( "person_age" )[0].value; 2) Si necesita la sum de los tres valores, debe convertirlo en tipo Number porque document.getElementsByName( "person_age" )[0] le da valor en tipo String . Entonces puedes hacer como:
+document.getElementsByName( "person_age" )[0].value function test() { var age = +document.getElementsByName("person_age")[0].value; var size = +document.getElementsByName("person_size")[0].value; var weight = +document.getElementsByName("person_weight")[0].value; document.getElementById("result").innerHTML = weight + size + age; } <form> <input type="text" name="person_age"> <input type="text" name="person_size"> <input type="text" name="person_weight"> <input type="button" value="calculate" onclick="test();"> </form> <h3 id="result"></h3>Solo una sugerencia: puede usar Document.getElementById si desea acceder directamente al valor. Simplemente agregue una propiedad de ID en su elemento. Devolverá un valor de cadena, conviértalo en int y listo.
function test() { var age = document.getElementById("person_age").value; var weight = document.getElementById("person_weight").value; var size = document.getElementById("person_size").value; document.getElementById("result").innerHTML = parseInt(weight) + parseInt(size) + parseInt(age); } <form> <input type="text" name="person_age" id="person_age"> <input type="text" name="person_size" id="person_size"> <input type="text" name="person_weight" id="person_weight"> <input type="button" value="calculate" onclick="test();"> </form> <h3 id="result"></h3>getElementsByName siempre devolverá una lista de nodos similar a una matriz, por lo que, si la usara, necesitaría acceder al primer índice [0] . En su lugar, agregue una clase a cada entrada y use querySelector para orientarla.
El valor de una entrada siempre será una cadena (incluso si la entrada es del tipo "número"), por lo que debe forzarla a un número, ya sea usando Number o prefijando el valor con + .
Entonces, en este ejemplo, actualicé un poco el HTML agregando clases a las entradas y cambiando su tipo a "número", y eliminando el JS en línea, y actualicé el JS para que los elementos se almacenen en caché fuera de la función, se agrega un detector de eventos al botón y los valores se calculan correctamente.
// Cache all the elements using querySelector to target // the classes, and add an event listener to the button // that calls the function when it's clicked const ageEl = document.querySelector('.age'); const weightEl = document.querySelector('.weight'); const sizeEl = document.querySelector('.size'); const result = document.querySelector('#result'); const button = document.querySelector('button'); button.addEventListener('click', test, false); function test() { // Coerce all the element values to numbers, and // then display the result const age = Number(ageEl.value); const weight = Number(weightEl.value); const size = Number(sizeEl.value); // Use textContent rather than innerHTML result.textContent = weight + size + age; } <form> <input type="number" name="age" class="age" /> <input type="number" name="size" class="size" /> <input type="number" name="weight" class="weight" /> <button type="button">Calculate</button> </form> <h3 id="result"></h3>`