當用戶在文本輸入中輸入一個單詞時，它會顯示在我的頁面上。所以名字可以累積。同時，我希望將名稱推送到陣列中。不幸的是，我做不到：
function getinnerText() {
const arr = []
const newProduct = document.createElement("li");
newProduct.textContent = `${name}`;
document.querySelector(".nameArea").appendChild(newProduct)
arr.push(name)
}
它總是為我創建我的陣列，只添加最后一個值。
有沒有人有辦法解決嗎？非常感謝=)！
uj5u.com熱心網友回復：
您需要將陣列移到函式之外。每次呼叫該函式時，您都在重新創建僅包含一項的陣列。
我會將模型與視圖分開。每次將產品添加到陣列時，重新渲染陣列中的內容。
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>uj5u.com熱心網友回復：
每次呼叫該getinnerText函式時，arr都會創建一個新變數。函式執行后，陣列將不再可用。
解決方案是const arr = []從函式宣告中移出，如下所示：
const arr = []
function getinnerText() {
const newProduct = document.createElement("li");
newProduct.textContent = `${name}`;
document.querySelector(".nameArea").appendChild(newProduct)
arr.push(name)
}
uj5u.com熱心網友回復：
您可以const arr = []從函式 getinnerText 外部宣告。所以你可以得到你輸入的每一個名字。否則，您會在每個函式呼叫時創建一個新陣列。
const arr = []
function getinnerText() {
const newProduct = document.createElement("li");
newProduct.textContent = `${name}`;
document.querySelector(".nameArea").appendChild(newProduct)
arr.push(name)
}
希望解決問題:)
uj5u.com熱心網友回復：
您可以在函式外部宣告您的陣列，然后在函式內相應地附加您的值。
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>轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/473553.html
標籤：javascript 数组 jquery 选择器