Checkbox -cross out der Text beim Klicken auf CheckBox für eine Todo-Liste

Question

Ich habe eine Anleitung zum Durchstreichen des Textes beim Klicken auf die checkbox neben dem Text und mein Code nicht funktioniert, obwohl seine das gleiche wie eins im Tutorial (wo es gut funktioniert).
Ich habe so lange auf meinen Code geschaut, kann aber nicht sehen, was falsch ist, vielleicht ist es nur ein Tippfehler, den ich nicht sehen kann & hellip; weiß jemand warum?

Hier ist der JavaScript-Code (nur der relevante Teil)

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

Sie Hauptproblem ist, dass Sie span.innerHtml = textItem; Satz, bevor sie tatsächlich bekommen den Wert var textItem = document.getElementById("textItem");

Aber hey ...

haben Nur 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>

Und hier ist ein viel einfacher trivial nicht-ganz-a-Tutorial selbsterklärend JS-Code:

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

Eine kleine Inspektion sagt mir Ihren Text zu Ihrem span wird nicht hinzugefügt, sondern auf den Eintrag selbst

hier ist also meine Replikation des Problems

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>

Eine leichte Modifikation das behebt Ihr Problem

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>