我似乎无法将项目推送到我的待办事项清单

问题描述 投票：0回答：3

成品应该在每个条目旁边都有一个复选框，以及编辑或删除每个项目的选项。我离此不远，因为我甚至无法发布一个项目。

这是我的文件：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>
javascript html html5
3个回答
0
投票

这是如何在页面上动态添加元素的简短示例。用户键入待办事项，然后单击按钮。当他们单击按钮时，我们从输入框中获取值，创建一个新的列表项元素，然后将其附加到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>
0
投票

一些问题：

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>
0
投票

你的主要问题是当你期望<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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.