0

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

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

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

});
4

2 回答 2

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>

于 2020-04-12T12:21:53.427 回答
0

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

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

var display_name = [];

document.addEventListener('DOMContentLoaded', () =>{
  document.querySelector("#button1").onclick = () => {
    let name = document.querySelector(".name").value;
    display_name.push(name);
  };
});
于 2020-04-12T12:25:32.503 回答