Javascript 将输入插入数组会导致多个数组而不是一个

Question

这是我的问题的后续，参见 here

我试图写下，当用户在字段中输入他们的名字(字符串)并按回车键时，它会将其插入一个数组中。它有效，有点。但是当我尝试一个时出现错误，然后当我尝试另一个时它会生成多个数组。我不想使用 jQuery。

这是 HTML

<input type="text"
   class="theplayer pre"
   name="Player"
   id="bind"
   placeholder="Enter Names"
    />
<button type="button" id="thego" class="pre enterteam" value="click">Go</button>

这是我的js，它可以工作，但它创建多个数组，而不是将所有内容插入一个数组(因为没有调用 nextElementSibling，我知道这一点，请参阅下一个 block

let namesOfPlayers = [];
let currentValue = document.getElementById("bind").value;
let button = currentValue.nextElementSibling;
document.addEventListener('keypress', function (e) {
    const key = e.which || e.keyCode;
    if (key === 13) {
        namesOfPlayers.push(currentValue);
        console.log('namesOfPlayers', namesOfPlayers);
    }
});

这是我的 js 抛出错误(我不想使用 jQuery)

我希望当用户按 Enter 或单击按钮时，字符串会被提交并添加到空数组中。我一生都无法弄清楚如何实现这一点。

感谢您的帮助!

Answer 1

您过早获取输入的值。您应该仅在单击按钮时而不是之前获取它。

其次，该按钮没有 keypress 事件，也没有与之关联的 keyCode 。您需要监听click事件。

所以这样做:

let namesOfPlayers = [];
let input = document.getElementById("bind");
let button = input.nextElementSibling;
button.addEventListener('click', function (e) {
    namesOfPlayers.push(input.value);
    console.log('namesOfPlayers', namesOfPlayers);
});

<input type="text"
       class="theplayer pre"
       name="Player"
       id="bind"
       placeholder="Enter Names" />
<button type="button" id="thego" class="pre enterteam" value="click">Go</button>