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」個輸入。我需要將輸入存儲在數組中並在單擊顯示按鈕時顯示它。應該怎麼做？我試圖用推（），但它不工作：

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>