¿Cómo almacenar INPUT por teclado tipo text en array?

Question

Estoy intentado hacer el siguiente ejercicio:

Haz una web con un input de tipo texto y dos botones “Añadir” y “Mostrar”
Al pulsar el botón “Añadir”, se añadirá el contenido del input a un array vacío previamente creado (definir como variable global) y borrará el input ( document.forms["nomForm"] ["nomInput"].value = "" ).
Al pulsar el botón “Mostrar”, se mostrará la lista de todos los elementos, uno por línea*

Pero no sé cómo debo hacer para que se guarde tipo ARRAY

De momento tengo:

<body>

    <form name="tercero" method="post">
        <label for="texto">Escribe un texto:</label><br>
        <input type="text" id="texto" name="texto" maxlength="35"><br>

        <button type="button" onclick="añadir()">AÑADIR</button>

        <button type="button" onclick="mostrar()">MOSTRAR</button>

        <p id="demo"></p>
    </form>

    <script>

        function añadir(){
            var arraytexto = [];
            document.getElementById('demo').innerHTML=arraytexto;
            } 
        }

        function mostrar(){
            document.getElementById("demo").innerHTML = arraytexto.join("*");
        }

    </script>


</body>

¿Borrar el input o dejarlo vacío? por que son cosas distintas — BetaM, Apr 28 '20 at 18:03
Entiendo que una vez haga click en "Añadir" se añadirá al array y quedará vacío el input anterior, por si quiero volver a introducir un nuevo elemento. — Victoria_lunática, Apr 28 '20 at 18:08

HERRERA · Accepted Answer · 2020-04-28T18:56:59.590

0

Para declarar la variable global, debes ponerla fuera de cualquier función, y con el método .push() agregas valores al array.

Para limpiar el input debes poner su value vacio

 document.getElementById('texto').value = "";

var arraytexto = [];

function añadir() {
  let palbras = document.getElementById('texto').value.split(" ");
  arraytexto = arraytexto.concat(palbras);
  document.getElementById('texto').value = ""; //limpias el array
}

function mostrar() {
  document.getElementById("demo").innerHTML = arraytexto.join("<br>");
}

<label for="texto">Escribe un texto:</label><br>
<input type="text" id="texto" name="texto" maxlength="35"><br>

<button type="button" onclick="añadir()">AÑADIR</button>

<button type="button" onclick="mostrar()">MOSTRAR</button>

<p id="demo"></p>

edited Apr 28 '20 at 18:56

answered Apr 28 '20 at 18:25

HERRERA

577
2
8

Muchas gracias. Con esto he conseguido que se guardaran en el array e imprimirlos, pero necesito imprimirlos en formato lista, no separados con un guión, ni un asterisco (que era lo que tenía yo)...voy a ver si lo saco. Gran ayuda!! =) – Victoria_lunática Apr 28 '20 at 18:42
Puedes remplazar el guion por `
` esto generara un espacio – HERRERA Apr 28 '20 at 18:43
arraytexto.join("
") – HERRERA Apr 28 '20 at 18:44
Claro, esto es si introduzco varios datos, dando cada vez click en "añadir", me los va sacando en forma lista cuando hago click en "mostrar". Pero, por ejemplo, si yo pongo "Hola soy Victoria", quiero que me salga: Hola soy Victoria – Victoria_lunática Apr 28 '20 at 18:46
Revisalo de nuevo lo he editado. – HERRERA Apr 28 '20 at 18:57
Siii!!! Ahora sí, muchas gracias!! Eso era lo que buscaba!! – Victoria_lunática Apr 28 '20 at 19:01
Te lo explico, la funcion `split(" ")` separa tu texto por espacios y lo convierte en un array, ahora debemos agregar todas las palabras separadas al array de palabras totales, y para ello usamos `.concat()` – HERRERA Apr 28 '20 at 19:03
He visto ambas funciones pero no sabía cómo utilizarlas en este caso. Gracias por la explicación. Saludos. – Victoria_lunática Apr 28 '20 at 19:06

BetaM · Answer 2 · 2020-04-28T18:49:46.010

Si no englobas dentro de un scope de función es decir dentro de {} por ejemplo a var o let ambas serían globales.

Por lo tanto puedes dejar a tu código de esta manera:

Dos listeners, uno para cada botón
Dentro del primer botón que agrega haces un push al vector
Dentro del botón que muestra a los botones haces un foreach del vector recién llenado

Propuesta

    <input id="numeros" type="text">
    <button id="agregar">Añadir</button>
    <button id="mostrar">Mostrar</button>
    <script>
        let numeros = []
        let numero = document.getElementById("numeros")
        let agregar = document.getElementById("agregar")
        let mostrar = document.getElementById("mostrar")
        
        agregar.addEventListener("click", () => {
          numeros.push(numero.value)
          numero.value = ""
          numero.focus()
          console.log(numeros)
        })
    
        mostrar.addEventListener("click", () => {
          numeros.forEach((numero) => {
            console.log(numero)
          })
        })
    </script>

Ahora si quieres que se imprima dentro del HTML, puedes hacerlo agregando cada número obtenido en las iteraciones con un salto de línea a una etiquet HTML

    <input id="numeros" type="text">
    <button id="agregar">Añadir</button>
    <button id="mostrar">Mostrar</button>
    <div id="lista"></div>
    <script>
        let numeros = []
        let numero = document.getElementById("numeros")
        let agregar = document.getElementById("agregar")
        let mostrar = document.getElementById("mostrar")
        let lista   = document.getElementById("lista")
        
        agregar.addEventListener("click", () => {
          numeros.push(numero.value)
          numero.value = ""
          numero.focus()
        })
    
        mostrar.addEventListener("click", () => {
          numeros.forEach((numero) => {
            lista.innerText += numero+"\n"
          })
        })
    </script>

Importante

Te recomiendo leer esta pregunta y respuestas (que no son mias) pero te van a ayudar un montón con el tema del scope de las variables

Muchas gracias por la respuesta pero lo he medio solucionado con la anterior, sois megarapidxs por aquí!! =) — Victoria_lunática, Apr 28 '20 at 18:47
Revisa el segundo código que agregue @Victoria_lunática :) — BetaM, Apr 28 '20 at 18:50

¿Cómo almacenar INPUT por teclado tipo text en array?

2 Answers2