Question

我一直在观看有关如何在单击文本旁边的checkbox时删除文本的教程，但我的代码不起作用，即使它与教程（工作得很好）。
我一直在看我的代码这么久但是看不出什么错，也许这只是一个我无法看到的错字......谁知道为什么？

这是JavaScript代码（只是相关部分）

function updatingItem() {

  var cbId = this.id.replace("cb_", "");
  var textItem = document.getElementById("item_" + cbId);
  textItem.style.textDecoration = "line-through";
}

function addItem() {

  totalItems++;
  var entry = document.createElement("li");
  var checkBox = document.createElement("input");
  checkBox.type = "checkbox";
  checkBox.id = "cb_" + totalItems;
  checkBox.onclick = updatingItem;

  var span = document.createElement("span");
  span.id = "item_" + totalItems;
  span.innerHtml = textItem;

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

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

Answer 1

您的主要问题是您在实际获取值span.innerHtml = textItem;之前设置了var textItem = document.getElementById("textItem");

但是嘿......

仅限CSS ：

label{
  display: block;
}
label input[type=checkbox]:checked + span{
  text-decoration: line-through;
}

  <label>
    <input type="checkbox">
    <span>Buy Coffee</span>
  </label>
  
  <label>
    <input type="checkbox" checked>
    <span>Ask question on SO</span>
  </label>
  
  <label>
    <input type="checkbox">
    <span>Drink coffee</span>
  </label>

这是一个更简单的琐碎的 not-an-a-tutorial 不言自明的JS代码：

var todoList = document.getElementById("todoList");
var itemText = document.getElementById("itemText");
var add      = document.getElementById("add");

add.addEventListener("click", function(){

  var text = itemText.value.trim();

  // IF NO TEXT ENTERED - DO NOTHING
  if(!text.length) return ;

  // CREATE AND APPEND HTML
  var item = "<li><label><input type='checkbox'> <span>"+ text+"</span></label></li>";
  todoList.insertAdjacentHTML('beforeend', item);

  // FINALLY CLEAR THE TEXT FROM OUR INPUT
  itemText.value = ""; 
  
});

label{
  display: block;
}
label input[type=checkbox]:checked + span{
  text-decoration: line-through;
  background:rgba(0,255,0, 0.2);
}

<ul id="todoList">
  <li>
    <label>
      <input type="checkbox">
      <span>Buy Coffee</span>
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox" checked>
      <span>Ask question on SO</span>
    </label>
  </li>
  <li>
    <label>
      <input type="checkbox">
      <span>Drink coffee</span>
    </label>
  </li>
</ul>

<input id="itemText" type="text">
<button id="add">ADD TO LIST</button>

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

Answer 2

一点点检查告诉我，您的文字没有添加到span，而是添加到条目本身

所以这是我对你的问题的复制

var totalItems = 0;

function updatingItem() {
  var cbId = this.id.replace("cb_", "");
  var textItem = document.getElementById("item_" + cbId);
  textItem.style.textDecoration = "line-through";
}

function addItem() {
  totalItems++;
  var entry = document.createElement("li");
  var checkBox = document.createElement("input");
  checkBox.type = "checkbox";
  checkBox.id = "cb_" + totalItems;
  checkBox.onclick = updatingItem;

  var span = document.createElement("span");
  span.id = "item_" + totalItems;
  span.innerHtml = textItem;

  var textItem = document.getElementById("textItem");
  entry.innerText = textItem.value;          //<<<<<Problem is here
  var location = document.getElementById("todoList");

  entry.appendChild(checkBox);
  entry.appendChild(span);
  location.appendChild(entry);
}

<html>
  <head>
  </head>
  <body>
    <ol id="todoList">
    </ol>
    <input type="text" id="textItem" placeholder="blabla"/>
    <button onclick="addItem()">add item</button>
  </body>
</html>

稍微修改以解决您的问题

var totalItems = 0;

function updatingItem() {
  var cbId = this.id.replace("cb_", "");
  var textItem = document.getElementById("item_" + cbId);
  textItem.style.textDecoration = "line-through";
}

function addItem() {
  totalItems++;
  var entry = document.createElement("li");
  var checkBox = document.createElement("input");
  checkBox.type = "checkbox";
  checkBox.id = "cb_" + totalItems;
  checkBox.onclick = updatingItem;

  var span = document.createElement("span");
  span.id = "item_" + totalItems;
  //span.innerHtml = textItem;             <<<<<Comment this out

  var textItem = document.getElementById("textItem");
  span.innerText = textItem.value;          //<<<<<Changed entry to span
  var location = document.getElementById("todoList");

  entry.appendChild(checkBox);
  entry.appendChild(span);
  location.appendChild(entry);
}

<html>
  <head>
  </head>
  <body>
    <ol id="todoList">
    </ol>
    <input type="text" id="textItem" placeholder="blabla"/>
    <button onclick="addItem()">add item</button>
  </body>
</html>

复选框 - 单击checkBox以查看待办事项列表时，将文本划掉

2 个答案: