JavaScript按钮单击时将用户输入存储在数组中

时间:2017-10-05 12:46:06

标签: javascript html arrays

capacity

当用户在文本框中输入数据后单击“添加”按钮时,我需要从用户那里获取输入。用户可以添加' n'我不知道的输入数量。我需要将输入存储在一个数组中,并在单击“显示”按钮时显示它。应该怎么做?我尝试使用push(),但它不起作用:



currentItems




2 个答案:

答案 0 :(得分:2)

意大利面条解决方案可能如下所示,

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>

答案 1 :(得分:1)

"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>