javascript - 复选框 - 单击待办事项列表的复选框时划掉文本

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>

这是一个简单得多的简单不完全是教程自解释的 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