如何使用事件侦听器向对象数组添加新元素并将其显示在 html 页面上
Posted
技术标签:
【中文标题】如何使用事件侦听器向对象数组添加新元素并将其显示在 html 页面上【英文标题】：How to add new elements to an objects-array using event listener and show it on the html page 【发布时间】：2020-01-08 18:33:33 【问题描述】：我正在尝试制作一个 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>
<form id="form">
Add a new todo
<input type="text" placeholder="Type your first name" name="firstName">
<button>Submit</button>
</form>【问题讨论】：
您的 HTML 中缺少#todo 元素
通过查看你的 devTools 控制台很容易知道错误在哪里，总是调试你的代码，你会很容易发现错误。下面的第一个答案可能就是你需要的。
【参考方案1】：
这里的主要问题是您的 HTML 中不存在 #todos 元素，这意味着您的页面中没有要显示的 todos 数据的“目标”。
作为对您的应用的改进，请考虑定义一个可重用函数，例如 updateView()，它会更新 #todo 元素的内容以显示 todos 数组中的当前数据。在您的应用中，可以调用：
-
提交表单后，显示新添加的待办事项
加载时，显示初始数据
一种实现方式如下：
// 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
];
/* Reusable function that updates the view container with current
data in todos array */
function updateView()
const container = document.getElementById("todo");
/* Clear list */
container.innerHTML = "";
/* Populate list with current todos data */
todos.forEach(function(todo)
const p = document.createElement('p');
p.textContent = todo.text;
container.appendChild(p);
);
const form = document.getElementById("form");
/* Add form submit event handler to add actual todo to list(s) */
form.addEventListener("submit", function(event)
/* Prevent default "page reload" form submit behavior */
event.preventDefault();
/* Extract text from input field */
const text = form.querySelector('input[name="firstName"]').value;
/* Add new todo item to todos array (model) */
todos.push(
text: text,
completed: false
);
/* Update container with added todo data */
updateView();
);
/* Populate container with inital data */
updateView();<h1>Todos</h1>
<form id="form">
Add a new todo
<input type="text" placeholder="Type your first name" name="firstName">
<button>Submit</button>
</form>
<!-- Add a DOM element that contains the actual display list -->
<div id="todo">
</div>【讨论】：
它只是一个 div 元素，我忘了把它添加到这篇文章中，你可以查看 github 看看 没问题 - 只是看看 gh repo 并看到你有待办事项:) 那么到底有什么问题呢？ 看起来你还没有定义addTask()【参考方案2】：
document.querySelector('#todo').appendChild(p); 您正在附加到一个不存在的 #todo 元素。输入<div id="todo"></div> 即可。
工作：
// 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);
)<body>
<h1>Todos</h1>
<form id="form">
Add a new todo
<input type="text" placeholder="Type your first name" name="firstName">
<button>Submit</button>
</form>
<div id="todo"></div>
<script src="todo-app.js"></script>
</body>【讨论】：
以上是关于如何使用事件侦听器向对象数组添加新元素并将其显示在 html 页面上的主要内容，如果未能解决你的问题，请参考以下文章