Question

成品应该在每个条目旁边都有一个复选框，以及用于编辑或删除每个项目的选项。我离那很远，因为我什至无法寄出物品。

以下是我拥有的文件：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>

Answer 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>

Answer 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>

Answer 3

您的主要问题是，您期望<input type="submit">和事件监听器一起使用<input type="button">时会使用click：

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>

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

3 个答案: