向数组添加新元素

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

那么你的代码将不再永远运行。