如何使用事件侦听器向对象数组添加新元素并将其显示在 html 页面上（已编辑代码）

Posted 2023-03-05

【中文标题】如何使用事件侦听器向对象数组添加新元素并将其显示在 html 页面上（已编辑代码）

【英文标题】：How to add new elements to an objects-array using event listener and show it on the html page (edited code)

【发布时间】：2020-01-08 19:50:23

【问题描述】：

（我之前发布过这个问题，但是我忘了添加一个缺失的元素，所以人们认为这是问题所在，但实际上并非如此，所以我再次发布了我应该首先使用的正确代码）

我正在尝试制作一个 todo 应用程序，然后我想使用 form 和 event listener 添加新的 todo，但是，当我完成代码后，应用程序只添加了书面文本到object-array，实际上并没有将其添加到html页面的待办事项列表中。

我将在下面提供一个小代码，显示数组、设置代码和 html，以使这个问题简短，但如果你想查看整个应用程序代码，请随时查看这个 github 的存储库： https://github.com/salahmak/Todo-application

您还可以通过此ngrok 链接查看应用程序的实时版本（我会一直保持它的状态，直到我解决问题）：http://7eb95c9a.ngrok.io

代码：

// The array
const todos = [
  text: 'wake up',
  completed: true
, 
  text: 'get some food',
  completed: true
, 
  text: 'play csgo',
  completed: false
, 
  text: 'play minecraft',
  completed: true
, 
  text: 'learn javascript',
  completed: false
];


//creating p elements and assigning their text content to each "text" property of the "todos" array

todos.forEach(function(todo) 
  let p = document.createElement('p');
  p.textContent = todo.text;
  document.querySelector('#todo').appendChild(p);
)

<h1>Todos</h1>
<div id="todo"></div>
<form id="form">
  Add a new todo
  <input type="text" placeholder="Type your first name" name="firstName">
  <button>Submit</button>
</form>

【问题讨论】：

可以在提交表单的时候加上todo的代码吗？

【参考方案1】：

试试这个（添加元素后更新 DOM）：

 document.querySelector('#form').addEventListener('submit', function(e) 
      e.preventDefault();
      let newObject =  text: e.target.elements.firstName.value, completed: false ;
      todos.push(newObject);
      renderTodos(todos, filters);
    );

这是完整的小提琴示例：https://jsfiddle.net/9j2nky6q/

【讨论】：

哦，我怎么没想到它确实有效，哈哈，谢谢伙计

【参考方案2】：

// The array
const todos = [
  text: 'wake up',
  completed: true
, 
  text: 'get some food',
  completed: true
, 
  text: 'play csgo',
  completed: false
, 
  text: 'play minecraft',
  completed: true
, 
  text: 'learn javascript',
  completed: false
];


//creating p elements and assigning their text content to each "text" property of the "todos" array

todos.forEach(function(todo) 
  let p = document.createElement('p');
  p.textContent = todo.text;
  document.querySelector('#todo').appendChild(p);
)

document.querySelector('button').addEventListener('click', function(e) 
  e.preventDefault();
  var todo = document.querySelector('input').value;
  todos.push(
    text: todo,
    completed: false
  );   document.querySelector('#todo').insertAdjacentHTML('beforeend', '<p>' + todo + '</p>');
);

<h1>Todos</h1>
<div id="todo"></div>
<form id="form">
  Add a new todo
  <input type="text" placeholder="Type your first name" name="firstName">
  <button>Submit</button>
</form>

【讨论】：

感谢 anwser 看起来有点长，有一些我还不知道的东西，但它应该可以工作

这只是一个模型来阐明原始过程。事实上，我只是添加了事件监听器。随时问。

你能解释一下最后一行吗？其中包含此方法：.insertAdjacentHTML

insertAdjacentHTML 等效于 append。不同之处在于它插入了string 作为标记（不是节点）。在这种情况下，<p> 和一个变量 todo，它是 input 字段的值。有据可查的here。