全局数组保持为空

Question

我正在尝试更新我的全局数组，但在我通过提交按钮提交文本值（.name）后，它仍然是 null。

请告诉我如何跟踪全局数组中的文本值。 谢谢你。

var display_name = [];
document.addEventListener('DOMContentLoaded', () =>{
  document.querySelector("#form1").onsubmit = () => {
    let name = document.querySelector(".name").value;
    display_name.push(name);
};

});

Answer 1

提交表单时，会加载一个新页面。 它在表单的action属性中加载 URL。 所以，你的变量消失了。

如果您不希望这种情况发生，请阻止使用preventDefault提交表单。

例如...

 const name_list = []; window.addEventListener('DOMContentLoaded', (e) => { const names = document.querySelector(`.names`); const add_button = document.querySelector(`.names--add_button`); names.addEventListener('submit', e => e.preventDefault()); add_button.addEventListener('click', (e) => { const name = document.querySelector(`.names--name`); const collected = document.querySelector(`.names--collected`); name_list.push(name.value); collected.innerHTML += `<li>${name.value}</li>`; name.value = ``; name.focus(); }); });

 body { background: snow; }

 <form class="names" action="#" method="post"> <label>Name: <input type="text" name="name" class="names--name"></label> <button class="names--add_button">Add To List</button> <div>Names Collected:</div> <ul class="names--collected"> </ul> </form>

Answer 2

我现在看到它工作得很好。 但是您希望每次单击按钮时都增加价值。 所以只需将您的<button type="submit">更改为<button type="button">

因为当您单击提交页面时，html 中会自动重新加载，您需要将事件从onsubmit更改为onclick并将您的按钮改为它而不是您的表单。

var display_name = [];

document.addEventListener('DOMContentLoaded', () =>{
  document.querySelector("#button1").onclick = () => {
    let name = document.querySelector(".name").value;
    display_name.push(name);
  };
});