Push in a empty array a text input in Javascript-CodePudding

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 =)!

CodePudding user response：

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 ></ul>

CodePudding user response：

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)
}

CodePudding user response：

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 :)

CodePudding user response：

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>