Push in a empty array a text input in Javascript

Question

When a user enters a word in a text input, it is displayed on my page. And so the names can accumulate. At the same time, I want the names to be pushed into an array. Unfortunately, I can't do it:

function getinnerText() {
    const arr = []
    const newProduct = document.createElement("li");
    newProduct.textContent = `${name}`;
    document.querySelector(".nameArea").appendChild(newProduct)
    arr.push(name)
  }

It always creates me my array with only the last value added.

Does anyone have a solution? Thanks a lot =)!

Answer 1

You need to move your array outside of the function. Each time you call the function, you are recreating the array with only one item.

I would separate the model from the view. Each time you add a product to the array, re-render what is in the array.

 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>

Answer 2

Everytime you call the getinnerText function, a new arr variable is created. After the function is executed, the array will not longer available.

The solution is to move the const arr = [] out from the function declaration like such:

const arr = []
function getinnerText() {
    const newProduct = document.createElement("li");
    newProduct.textContent = `${name}`;
    document.querySelector(".nameArea").appendChild(newProduct)
    arr.push(name)
}

Answer 3

You can declare const arr = [] outside from the function getinnerText. So you can get every names you have entered. Otherwise you create an new array every function call.

const arr = []
function getinnerText() {
    const newProduct = document.createElement("li");
    newProduct.textContent = `${name}`;
    document.querySelector(".nameArea").appendChild(newProduct)
    arr.push(name)
}

Hope solve the issue:)

Answer 4

You can declare your array outside function and then append your value accordingly inside the function.

 const arr = []; function myFunction(){ const newStr = document.createElement("li"); let inputVal = document.getElementById("inputText").value newStr.innerHTML= inputVal; document.getElementById("foo").appendChild(newStr); arr.push(inputVal); document.getElementById("inputText").value = ""; console.log(arr); }

 #foo { display:flex; flex-direction:column; }

 <input id="inputText" type="input" onchange="myFunction()"> <div id="foo"></div>