向數組添加新元素

Question

我正在嘗試編寫一個按鈕，單擊該按鈕時，調用一個向元素添加（追加）新元素的函數，然后將該元素打印到屏幕上。 在這種情況下，我試圖在現有的單詞列表中添加新單詞。 我有幾個問題：

1. 如何讓陣列在這樣的頁面上打印出來：（ https://imgur.com/a/He4vK ）。 我是否只使用換行符編寫幾個新的段落標記以顯示數組的元素？

2. 我的按鈕似乎出現了根本性的問題。 它不僅沒有做我想做的事，而且甚至不會顯示“試一試！” 我希望它的文字。

3. addToArray函數在調用時不會執行。 無論是在錯誤的地方還是我寫的函數都是完全錯誤的語法，我不知道。

這是我到目前為止所擁有的：

<h1>Adding elements onto the end of an array:</h1>
<p>Click the button below to append more values to the array!</p>
<button id="btnAdd" value="Try it!" onclick="addFruitOnClick()"/>

<script type = "text/javascript">
    var foods = [];
    foods[0] = "Banana";
    foods[1] = "Orange";
    foods[2] = "Apple";
    foods[3] = "Mango";
    foods[4] = "Lemon"; 

    var i = 0;
    while (i < foods.length) {
        document.write(foods[i] + "<br />");
    }

function addFruitOnClick() { // Define first function
    document.write("hi");
}

function addToArray() {  // Define what the second function's task is

        foods.concat([ // Using (array.concat) to append to existing array
                    "dragonfruit",
                    "Cherry",
                    "Lime",
                    "Strawberry"
                    ]);
    }

} // End of addToArray
addtoArray ();

</script>

我遺漏了我的頭/身體/ html標簽，但這是它的主旨。 任何幫助表示贊賞。

Answer 1

您可以使用push向數組添加新元素，例如：

foods.push("Kiwi");

Answer 2

我對concat和addFruitOnClick函數的代碼進行了一些修改。

var foods = [];
foods[0] = "Banana";
foods[1] = "Orange";
foods[2] = "Apple";
foods[3] = "Mango";
foods[4] = "Lemon"; 

function display(){
     var i = 0;
     while (i < foods.length) {
         document.write(foods[i++] + "<br />");
     }
     document.write("<br />");
}

function addFruitOnClick(fruit) { // Define first function
     foods.push(fruit);
}

function addToArray() {  // Define what the second function's task is

       foods = foods.concat([ // Using (array.concat) to append to existin array
                "dragonfruit",
                "Cherry",
                "Lime",
                "Strawberry"
                ]);

} // End of addToArray

display();
addFruitOnClick("Cherry");
display();
addToArray ();
display();

Answer 3

我稍微改變了你的代碼 - 你可以使用這個概念來根據你的需要進行塑造 - 基本上只有一個水果陣列，這顯示為動態創建的列表。

然后，我有一系列按鈕，調用函數將特定食物添加到數組中。

單擊廣告按鈕 - 允許將新水果添加到陣列中，然后您只需重新渲染以免顯示新內容。 這可以修改為刪除水果：

 var foods = ["Banana", "Orange","Apple", "Mango","Lemon"] showFoods(); function showFoods() { var str= ''; foods.forEach(function(food) { str += '<li>' + food + '</li>'; }); document.getElementById('foods').innerHTML = str; } function addFood(food){ foods.push(food); showFoods(); } 

 #foods{list-style:none} 

 <ul id="foods"></ul> <button type="button" onclick="addFood('Dragonfruit')">Add Dragonfruit</button> <button type="button" onclick="addFood('Cherry')">Add Cherry</button> <button type="button" onclick="addFood('Lime')">Add Lime</button> <button type="button" onclick="addFood('Strawberry')">Add Strawberry</button> 

Answer 4

首先，在腳本結束時，您應該調用addToArray() ，而不是addtoArray() （大小寫）

接下來，函數concat不會更新你的數組，你應該寫

foods = foods.concat([ "dragonfruit", "Cherry" /* ... */ ])

要么

[ "dragonfruit", "Cherry" /* ... */ ].forEach(function(fruit){ food.push(fruit) })

那么你的代碼將不再永遠運行。