// Hier den Code ergaenzen // (Event-Handling fuer Hinzufuegen-Button, DOM-Manipulation fuer Tabelle) var button = document.getElementsByTagName("button")[0]; button.onclick = function(){ createCheckbox(); } var tbody = document.getElementsByTagName("tbody")[0]; var i = 0; function createCheckbox(tr) { // Hier den Code fuer die Erzeugung der Checkbox ergaenzen // Empfohlene Strategie: // 1. Erstelle eine Checkbox per DOM-API // 2. Fuege einen Event-Handler fuer Klick auf die Checkbox hinzu // 3. Falls Checkbox angehakt (checked): Text in Zeile (tr) durchstreichen // 4. Sonst: Text in Zeile (tr) normal darstellen var inputs = document.getElementsByTagName("input"); var content =inputs[inputs.length - 1].value; var tr = document.createElement("tr"); var doneTd = document.createElement("td"); var checkbox = document.createElement("input"); checkbox.type = "checkbox"; checkbox.setAttribute("onclick", "toggleBox(" + i++ + ")"); doneTd.append(checkbox); tr.append(doneTd); var todoTd = document.createElement("td"); todoTd.append(document.createTextNode(content)); todoTd.style.textDecoration = "none"; tr.append(todoTd); tbody.append(tr); } function toggleBox(num){ var text = document.getElementsByTagName("td")[num * 2 + 1]; if(text.style.textDecoration == "none"){ text.style.textDecoration = "line-through"; }else{ text.style.textDecoration = "none"; } }