0

Estoy aprendiendo JavaScript y estoy intentando usar la función forEach. El ejemplo que uso, es acerca de tener 5 input[type="text"] con valores definidos en HTML5.

Este es el código que intento:

var input = document.getElementsByTagName('input').value;
alert(input);
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <title>Juego</title>
</head>

<body>

  <input type="text" name="uno" id="uno" value="uno">
  <input type="text" name="dos" id="dos" value="dos">
  <input type="text" name="tres" id="tres" value="tres">
  <input type="text" name="cuatro" id="cuatro" value="cuatro">
  <input type="text" name="cinco" id="cinco" value="cinco">

</body>

</html>

Quisiera saber cómo obetener el valor de cada input. ya se con forEeach, o con otra función.

1 respuesta 1

3

Para mi la forma mas sencilla es usar [...document.getElementsByTagName('input')] (Asignación por destructuring ) para conformar un array de todos los inputs. En base a eso tienes al menos dos opciónes para obtener los values.

//podemos iterar con forEach()
[...document.getElementsByTagName('input')].forEach(input => {
  console.log(input.value);
});

//podemos guardar todos los valores en un array usando map()
const arrayDeValues = [...document.getElementsByTagName('input')].map(input => input.value
);

console.log(arrayDeValues)
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <title>Juego</title>
</head>

<body>

  <input type="text" name="uno" id="uno" value="uno">
  <input type="text" name="dos" id="dos" value="dos">
  <input type="text" name="tres" id="tres" value="tres">
  <input type="text" name="cuatro" id="cuatro" value="cuatro">
  <input type="text" name="cinco" id="cinco" value="cinco">

</body>

</html>

2
  • Muchas gracias. Pero quisiera saber porqué se pone [...*]
    – Saco04
    el 28 ago. 2019 a las 12:59
  • [...] lo que hace en este caso es poner los items del objeto resultante en un array, lo que nos hace la vida mas fácil al momento de querer iterar sobre el mismo. Acá hay una explicación mas completa developer.mozilla.org/es/docs/Web/JavaScript/Referencia/…
    – Emeeus
    el 28 ago. 2019 a las 13:02

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.