时间戳

首页 > 解决方案 > 为什么我的 onclick 属性在提交时不运行该功能？

javascript - 为什么我的 onclick 属性在提交时不运行该功能？

问题描述

每个人。有点 JS 菜鸟。第一个问题在这里。我尝试通过 Stack Overflow 提交指南更加具体，但我不确定如何，因为我不确定这有什么问题。成为更好的提问者的提示值得赞赏。

我正在构建一个简单的 JS 待办事项列表，尽量不使用视频教程。我只是无法弄清楚这有什么问题。在点击“提交”按钮时，控制台日志或实际页面中都没有发生任何事情。我究竟做错了什么？

let todoInput = document.getElementById("input");
let list = document.getElementById("submit");
let form = document.getElementById("form");

list.onclick = function addTodo(e) {
  e.preventDefault();
  // todo div
  const todoDiv = document.createElement('div');
  todoDiv.classList.add('todo');
  // todo LI
  const newTodo = document.createElement('li');
  newTodo.innerText = todoInput.value;
  newTodo.classList.add('todo-item');
  todoDiv.appendChild(newTodo);
  if (todoInput.value === "") {
    return null
  }
};
<h1>TODO LIST</h1>
<form id="form" onload="false">
  <input id="input" type="text">
  <input id="submit" type="submit" value="Submit">
</form>
<div id="output"></div>

标签： javascript

解决方案

那是因为当你创建todoDiv元素时，你根本没有将它附加到你的 DOM 中。如果要将其附加到#output元素，可以在最后添加以下行：

document.getElementById('output').appendChild(todoDiv);

注意：您的li元素必须附加到<ul>元素。您可以更改#output为一个<ul>元素并将列表项直接附加到它：

请参阅下面的概念验证：

let todoInput = document.getElementById("input");
let list = document.getElementById("submit");
let form = document.getElementById("form");
let output = document.getElementById("output");

list.onclick = function addTodo(e) {
  e.preventDefault();

  // todo LI
  const newTodo = document.createElement('li');
  newTodo.innerText = todoInput.value;
  newTodo.classList.add('todo-item');
  output.appendChild(newTodo);
};
<h1>TODO LIST</h1>
<form id="form" onload="false">
  <input id="input" type="text">
  <input id="submit" type="submit" value="Submit">
</form>
<ul id="output" class="todo"></ul>

推荐阅读