a

WS24_25/WebTech/web-pruefung-projekt/aufgabe5/todo-script.js

@@ -0,0 +1,42 @@
+// 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";
+  }
+
+}