我似乎无法将项目推送到我的待办事项列表答案

【问题标题】：I cannot seem to push items to my to-do list我似乎无法将项目推送到我的待办事项列表
【发布时间】：2019-03-04 21:23:13
【问题描述】：

成品应该在每个条目旁边都有一个复选框，以及编辑或删除每个项目的选项。我还差得很远，因为我什至无法发布要发布的项目。

这是我拥有的文件：HTML、CSS、JS。

另外，我很抱歉格式化。我没有粘贴 CSS，因为就我而言这不是问题。

HTML：

var list = document.getElementById('list'); //The unordered list.
var entry = document.createElement("li"); //Whatever this is. I'm assuming a command saved into a variable (?).

//var todolist = list.getElementsById('li');
// var btn = document.getElementById('ToDoButton');
//
// btn.addEventListener("click", function(){
//     todolist.appendChild('li');
// });

/* Upon submission of the item in the text field, the string is stored in inputValue
and theText becomes a text node of inputValue, which is appended to the end of the variable
entry. This means that there should be a new item added to the unordered list with the information
found in the text field, but it doesn't show.
    
Also, as far as I know, this is only if the Add button is clicked, and not upon
pressing Enter while in the text box. */
function newElement() {
  var inputValue = document.getElementById("textBox").value;
  var theText = document.createTextNode(inputValue);
  entry.appendChild(theText);
  if (inputValue !== '') {
    document.getElementById(list).appendChild(entry);
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>To-Do List</title>
  <link rel="stylesheet" href="todo.css">
</head>

<body>
  <div class="toDoList">
    <h4>To-Do List</h4>
    <form target="_self">
      <!-- This is so that the submitted information doesn't go anywhere but to the current page. -->
      <input type="text" name="toDoList" placeholder="To-Do" id="textBox">
      <input type="submit" value="Add" onclick="newElement()" id="ToDoButton">
      <!-- newElement() is a JS function that will add the information in the search bar to the unordered list below. -->
    </form>
  </div>
  <section id="main">
    Tasks:
    <ul id="list">
      <!-- These are dummy values for the unordered list. The idea
                    is that the next item should be placed beneath them. -->
      <li>test1</li>
      <li>test2</li>
      <li>test3</li>
    </ul>
  </section>
  <script type="text/javascript" src="todo.js">
  </script>
</body>

</html>

【问题讨论】：

您正在提交表单，这会导致页面重新加载吗？
How to prevent default on form submit?的可能重复
document.createElement 将在内存中创建一个元素，但在将其附加到 DOM 之前它不会呈现。您需要以某种方式将entry 附加到DOM，即作为主体的子元素或ID 为“main”的元素的子元素等。您也不想提交表单，正如他们所说的^。为此，请使用按钮类型的输入而不是提交类型的输入。（老实说，您已经有一个 ID 为“list”的列表——只需将新项目附加到该列表中，而不是不必要地创建“条目”。）
@IsaacVidrine，确实发生了。我想我不知道这样做会发生什么，并认为它会重新加载更改。这里的另一个答案导致这不是我应该拥有的。
@IceMetalPunk，我以为我在 JS 文件的倒数第三行代码中附加了entry。我知道附加到<ul id='list'> 标签不起作用，但我不明白为什么它不起作用。关于不要不必要地创建新变量的好点 - 谢谢。我是一个草率的编码员。

标签： javascript html

【解决方案1】：

这是一个关于如何在页面上动态添加元素的简短示例。用户输入待办事项，然后单击按钮。当他们单击按钮时，我们从输入框中获取值，创建一个新的列表项元素，然后将其附加到 dom 中。

function addItem() {
  var el = document.createElement('li')
  var val = document.getElementById('item-val').value;
  el.innerHTML = val;
  document.getElementById('list').append(el);
}

<input id="item-val" type="text" />
<button onclick="addItem()">Add an item</button>
<ul id="list"></ul>

【讨论】：

【解决方案2】：

几个问题：

1) 当您单击按钮时，它会提交表单。这会导致您的页面刷新，因此 JavaScript 所做的所有更改都将丢失，因为您从服务器重新加载页面。将其更改为<button type="button" 意味着它不会再导致回发。老实说，如果您不打算将数据发送到服务器，您可能根本不需要<form>。

2) 最好将 list 和 entry 变量放在函数中 - 如果可以，最好避免使用全局变量，以减少意外的范围问题。此外，您每次都需要创建一个新的entry，而不是一直附加同一个。

3) document.getElementById(list).appendChild(entry) 不起作用，因为 list 已经是一个表示元素的对象 - 它不是包含 ID 的字符串。所以 list.appendChild() 在这里是正确的 - 即您可以直接在现有对象上调用 appendChild() 函数。

4) 或者，您实际上并不需要单独的 textNode 对象 - 只需设置列表项的 innerText 属性即可。

5) 再次可选，但被认为是最佳实践：我声明了一个不显眼的事件处理程序（使用addEventListener），而不是将其内联到 HTML 中。这通常被认为使代码更易于维护和跟踪，因为所有脚本都保存在一个位置，与 HTML 分开。

这是一个固定版本：

document.querySelector("#ToDoButton").addEventListener("click", newElement);

/* Upon submission of the item in the text field, the string is stored in inputValue
and theText becomes a text node of inputValue, which is appended to the end of the variable
entry.*/

function newElement() {
  var list = document.getElementById('list'); //The unordered list.
  var entry = document.createElement("li"); //a new list item
  var inputValue = document.getElementById("textBox").value;
  
  if (inputValue !== '') {
    entry.innerText = inputValue;
    list.appendChild(entry);
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>To-Do List</title>
  <link rel="stylesheet" href="todo.css">
</head>

<body>
  <div class="toDoList">
    <h4>To-Do List</h4>
    <form target="_self">
      <input type="text" name="toDoList" placeholder="To-Do" id="textBox">
      <button type="button" id="ToDoButton">Add</button>
    </form>
  </div>
  <section id="main">
    Tasks:
    <ul id="list">
      <!-- These are dummy values for the unordered list. The idea
                    is that the next item should be placed beneath them. -->
      <li>test1</li>
      <li>test2</li>
      <li>test3</li>
    </ul>
  </section>
  <script type="text/javascript" src="todo.js">
  </script>
</body>

</html>

【讨论】：

非常感谢您的回复。我还有几个问题：2）有人指出，与其创建变量entry，不如输入它所指的内容，即document.createElement("li")。这样做会导致重复使用相同的对象/元素/可能是什么术语的相同问题吗？ 3）我想我在那里错误地使用了撇号。我打算使用引用来引用id 属性，类似于它对其他标签的处理方式。 list 不会是 id，但 "list" 是。那应该没问题吧？ 5）我之前有过类似的事情！谢谢！
2) 重复使用相同的东西不会导致问题 - 每次运行命令时都会创建一个新项目。但不确定您是否应该完全删除entry - 它在（我的）代码中被引用，您需要将其附加到列表中。不知道那句话是什么意思。 3) 是的，在 document.getElementById 中使用“列表”就可以了，但实际上，既然您已经创建了 list 变量来引用该元素，那么您不妨使用它——使用现有引用比创建新引用更有效一。
无论如何，如果我的回答解决了您的问题，请记得将其标记为“已接受”（单击答案旁边的勾号使其变为绿色）-谢谢 :)

【解决方案3】：

您的主要问题是，当您期望 <input type="button"> 与 click 事件侦听器的行为时，您正在使用 <input type="submit">：

document.querySelector('#ToDoButton').addEventListener('click', newElement);

function newElement() {
  var inputValue = document.getElementById("textBox").value;
  var theText = document.createTextNode(inputValue);
  var liEl = document.createElement('li');

  liEl.appendChild(theText);
  if (inputValue !== '') {
    document.getElementById('list').appendChild(liEl);
  }
}

<head>
  <title>To-Do List</title>
  <link rel="stylesheet" href="todo.css">
</head>

<body>
  <div class="toDoList">
    <h4>To-Do List</h4>
    <input type="text" name="toDoList" placeholder="To-Do" id="textBox">
    <!--The input type needs to be "button, not "submit"-->
    <input type="button" value="Add" id="ToDoButton">
  </div>
  <section id="main">
    Tasks:
    <ul id="list">
      <li>test1</li>
      <li>test2</li>
      <li>test3</li>
    </ul>
  </section>
  <script type="text/javascript" src="todo.js">
  </script>
</body>

【讨论】：