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

Checkbox -cross out the text when clicking checkBox for a todo list

本文关键字：复选框 文本 列表 单击      更新时间：2023-09-26

我一直在看一个关于如何在单击文本旁边的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);
}

主要问题是在实际获得值var textItem = document.getElementById("textItem"); 之前设置了span.innerHtml = 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-quite-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

一个小检查告诉我您的文本没有添加到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>

相关文章：