新しい要素を配列に追加する

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タグを残したが、それはそれのJISTです：

は、ここで私がこれまで持っているものです。どんな助けもありがとうございます。

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

あなたのコードはもう永遠に実行されません。