ボタンのクリックでJavaScriptにユーザー入力を格納する

Question

<table> 
     <tr> 
      <td>Enter the Input</td> 
      <td><input type="text" id="inputtext" /></td> 
     </tr> 
     <tr> 
      <td></td> 
      <td><button type="button" id="add" onclick="addRecord();">Add </button> 
      <button type="button" id="display" onclick="displayRecord();">Display</button> 
      </td> 
     </tr> 
</table> 

テキストボックスにデータを入力した後にユーザーが[追加]ボタンをクリックすると、ユーザーからの入力が必要になります。ユーザーは、わからない「n」個の入力を追加することがあります。入力を配列に格納し、Displayボタンをクリックして入力を表示する必要があります。それはどうすればいいのですか？しかし私はそれが動作しない、）（プッシュを使用してみました：

function addRecord() 
 
{ 
 
    
 
    var add= document.getElementById("add"); 
 
    var addArray= []; 
 
    addArray.push(add.value); 
 
}

Answer 1

スパゲッティ・ソリューションは、スニペット、以下のようであるかもしれない、

values = []; 
 

 
function addRecord() { 
 
    var inp = document.getElementById('inputtext'); 
 
    values.push(inp.value); 
 
    inp.value = ""; 
 
} 
 

 
function displayRecord() { 
 
    document.getElementById("values").innerHTML = values.join(", "); 
 
}

<table> 
 
      <tr> 
 
       <td>Enter the Input</td> 
 
       <td><input type="text" id="inputtext" /></td> 
 
      </tr> 
 
      <tr> 
 
       <td></td> 
 
       <td><button type="button" id="add" onclick="addRecord();">Add </button> 
 
       <button type="button" id="display" onclick="displayRecord();">Display</button> 
 
       </td> 
 
      </tr> 
 
    </table> 
 

 
    <div id='values'></div>

Answer 2

"use strict"; 
 

 
let addButton = document.querySelector('#add'); 
 
let displayButton = document.querySelector('#display'); 
 
let records = []; 
 

 
addButton.addEventListener('click', addRecord); 
 
displayButton.addEventListener('click', displayAll); 
 

 
function addRecord() { 
 
    let record = document.querySelector('#inputtext').value; 
 

 
    if (!record) { 
 
     return; 
 
    } 
 

 
    records.push(record); 
 
    document.querySelector('#inputtext').value = ''; 
 
} 
 

 
function displayAll() { 
 
    alert(records); 
 
}

<table> 
 
    <tr> 
 
     <td>Enter the Input</td> 
 
     <td><input type="text" id="inputtext" /></td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td><button type="button" id="add">Add </button> 
 
      <button type="button" id="display">Display</button> 
 
     </td> 
 
    </tr> 
 
</table>