时间戳

首页 > 解决方案 > 全局数组保持为空

javascript - 全局数组保持为空

问题描述

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

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

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

});

标签： javascripthtml

解决方案

提交表单时，会加载一个新页面。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>

推荐阅读