Question

这里是JS的新手，并尝试创建一个基本的待办事项列表。我已经通过CodeAcademy和TreeHouse教程并理解函数，如果语句，循环，对象等，但我发现只有你试图创建自己的项目，你才意识到它没有实际沉入！

所以我现在正在尝试构建一个基本的待办事项列表，最终会让我添加新任务，将任务标记为已完成等等。我知道网上有教程，但是没有自己创建它我不会我想我会学习的。

因此，我将值输入名为“taskField”的元素并将其存储在名为task的变量中：

var task = document.getElementById("taskField");

然后，我正在创建一个名为addTask（）的函数：

function addTask() {
 var liNode = document.createElement("li");  // Creates an li tag and sets it as a variable known as liNode
 liNode.appendChild(task); // Appends liNode to the value of the variable task declared above
 document.getElementById("taskList").appendChild(liNode); //  Gets the ul and adds the li item
}

单击按钮时会调用该函数，这是我的jsfiddle所以你也可以看到我的所有HTML标记：https://jsfiddle.net/3b5rprx0/

那么，我在这里做错了什么？

干杯。

Answer 1

你犯的错误是，

1）您试图将整个文本框添加到“li”元素中相反，你需要使用'value'属性来获取它的值。

它应该是，

var task = document.getElementById("taskField").value;
var liNode = document.createElement("li");
liNode.innerHTML=task;

我已经更改了代码。看看它。 https://jsfiddle.net/gox8x6ot/

Answer 2

你需要像这样更改代码

function addTask() {
  // create li element
  var liNode = document.createElement("li");

  // get value of id 'taskField'
  var task = document.getElementById("taskField").value;

  // set content of li above
  liNode.innerHTML = task;

  // append li element to taskList
  document.getElementById("taskList").appendChild(liNode);
}

操纵html，使用jquery而不是使用原生

更容易

info：https://jquery.com/

你可以通过谷歌找到很多关于jquery的教程和常见问题

Answer 3

您需要更改此代码。更新后的代码如下所示。

<html>
<head>
</head>
<body>
<h1>To-Do List</h1>
<form id="taskForm">
  <input id="taskField" type="text" value=''>
</form>
<button id="btn" onclick="addTask()">Add Task!</button>
<ul id="taskList">
</ul>
</body>
</html>

使用

更新您的脚本

<script>    
var task = document.getElementById("taskField");
var tasklist = document.getElementById("taskList");
function addTask() {
  var mytask = task.value;
      var textval = document.createTextNode(mytask);
  var liNode = document.createElement("li");
  liNode.appendChild(textval);
  document.getElementById("taskList").appendChild(liNode);
} 
</script>

请参阅此代码 Updated Code Preview on Codepen

通过id获取元素然后将其存储在变量中，然后将其附加到li？

3 个答案: