Cuando un usuario ingresa una palabra en una entrada de texto, se muestra en mi página. Y así los nombres pueden acumularse. Al mismo tiempo, quiero que los nombres se inserten en una matriz. Desafortunadamente, no puedo hacerlo:
function getinnerText() { const arr = [] const newProduct = document.createElement("li"); newProduct.textContent = `${name}`; document.querySelector(".nameArea").appendChild(newProduct) arr.push(name) }Siempre me crea mi matriz con solo el último valor agregado.
¿Alguien tiene una solución? Muchas gracias =)!
Debe mover su matriz fuera de la función. Cada vez que llama a la función, está recreando la matriz con un solo elemento.
Separaría el modelo de la vista. Cada vez que agregue un producto a la matriz, vuelva a representar lo que hay en la matriz.
const nameInput = document.querySelector('input[name="product"]'), addButton = document.querySelector('#add'), nameArea = document.querySelector('.nameArea'); const products = []; const render = () => { nameArea.innerHTML = ''; products.forEach(product => { const newProduct = document.createElement('li'); newProduct.textContent = product; nameArea.appendChild(newProduct) }); } const handleAdd = (e) => { products.push(nameInput.value); nameInput.value = ''; render(); }; document.querySelector('#add').addEventListener('click', handleAdd); <input name="product" /> <button id="add">Add</button> <ul class="nameArea"></ul>Cada vez que llama a la función getinnerText , se crea una nueva variable arr . Después de ejecutar la función, la matriz ya no estará disponible.
La solución es sacar la const arr = [] de la declaración de la función de la siguiente manera:
const arr = [] function getinnerText() { const newProduct = document.createElement("li"); newProduct.textContent = `${name}`; document.querySelector(".nameArea").appendChild(newProduct) arr.push(name) }Puede declarar const arr = [] fuera de la función getinnerText. Para que pueda obtener todos los nombres que ha ingresado. De lo contrario, crea una nueva matriz cada llamada de función.
const arr = [] function getinnerText() { const newProduct = document.createElement("li"); newProduct.textContent = `${name}`; document.querySelector(".nameArea").appendChild(newProduct) arr.push(name) }Espero resolver el problema :)