待办事项列表 javascript-我的代码/订单有问题答案

【问题标题】：To do list javascript-something is wrong with my code/order待办事项列表 javascript-我的代码/订单有问题
【发布时间】：2016-03-24 03:14:04
【问题描述】：

我正在构建一个小型待办事项列表，到目前为止一切正常，直到我添加了一个复选框。现在，当我单击按钮时，什么也没有发生，也没有看到复选框。代码的顺序一定有问题——有人知道我需要如何重新排列代码吗？为什么？

HTML代码：

<body>
<h1>To Do List</h1>
<p><input type="text" id="textItem"/><button id="add">Add</button></p>

<ul id="todoList">
</ul>
</body>

Javascript 代码：

function addItem() {
  var entry = document.createElement("li");
  var checkBox = document.getElementById("input");
  checkBox.type = "checkbox";
  var span = document.createElement("span");
  span.innerText = entry;

  var textItem = document.getElementById("textItem");
  entry.innerText = textItem.value;
  var location = document.getElementById("todoList");

  entry.appendChild(checkBox);
  entry.appendChild(span);
  location.appendChild(entry);

}

var item = document.getElementById("add");
item.onclick = addItem;

【问题讨论】：

我注意到的一件事是抛出了一个错误代码，因为您的中没有用于复选框的 ID 为“input”的元素。

标签： javascript html checkbox input

【解决方案1】：

已更新 - 我发现了 4 个问题。关注以下：

第一个：当你创建复选框时，你应该使用 setAttribute 方法来指定输入类型：checkbox.setAttribute("type" , "checkbox")

第二个：您的复选框变量应该创建一个输入元素：var checkBox = document.createElement("input");

3rd：当您引用存储在您的条目变量中的列表 ELEMENT 时，您应该使用 innerHtml 而不是 innerText：span.innerHtml = entry;

第 4 次：非常小，但你应该在你的函数之前抓住你的项目并在项目上附加一个事件：

var item = document.getElementById("add");
item.addEventListener("click" , addItem)

只需将您的 javascript 更改为以下内容：

var item = document.getElementById("add");
item.addEventListener("click" , addItem)

function addItem() {
  var entry = document.createElement("li");
  var checkBox = document.createElement("input");
  checkBox.setAttribute("type" , "checkbox");
  var span = document.createElement("span");
  span.innerHtml = entry;

  var textItem = document.getElementById("textItem");
  entry.innerText = textItem.value;
  var location = document.getElementById("todoList");

  entry.appendChild(checkBox);
  entry.appendChild(span);
  location.appendChild(entry);

}

此处示例：http://codepen.io/theConstructor/pen/pyPdgg

祝你好运！

【讨论】：

谢谢！为什么要使用 evenlistener？如果我只是使用您的代码并离开 var item = document.getElementById("add"); item.onclick = 添加项目；正如我所拥有的，我得到了一个奇怪的结果：[object HTMLLIElement]
我已经更新了我的代码以反映...再次检查链接。
谢谢！！你知道我怎样才能让盒子出现在左边而不是右边吗？
是的，只需将跨度浮动在您的 css 样式表中。一旦元素在 dom 中加载，样式将被应用。
我试过了 - li span { float:left; } 但什么也没发生..