Javascript Aufgabenliste

Ich versuche, eine to-do-Liste App zu erstellen und versuche, ein anklickbares Kontrollkästchen neben jedem Element hinzuzufügen, wie es der Liste hinzugefügt wird. Ich bin sehr neu, also jede Hilfe würde sehr geschätzt werden!Javascript Aufgabenliste

Vielen Dank!

function todoList() { 
 
     var item = document.getElementById('todoInput').value 
 
     var text = document.createTextNode(item) 
 
     var newItem = document.createElement("li") 
 
     newItem.appendChild(text) 
 
    document.getElementById("todoList").appendChild(newItem) 
 
    }

<form id="todoForm"> 
 
     <h1>To Do List:<h1> 
 
     <input id="todoInput"> 
 
     <button type="button" onclick="todoList()">Add Item</button> 
 
    </form> 
 
    <ul id="todoList"> 
 
    </ul>

Quelle

2017-02-21 bemon

was Problem ist ?? –

Es scheint, dass Sie bereits wissen, wie Sie Elemente in einem allgemeinen Sinn erstellen und anhängen (der Code, den Sie gezeigt haben, funktioniert), was gibt Ihnen also Schwierigkeiten, wenn es um Checkboxen geht? (Sie wollen die Checkboxen in den neuen li-Elementen, oder? Also erstellen Sie eine und hängen Sie an 'newItem'.) – nnnnnn

Ich denke, ich war nicht sicher, was alles hinzugefügt werden musste, wie Typ, Name, Wert usw. Danke für die Antwort – bemon

aktualisieren Javscript

jsFiddle Demo

function todoList() { 
     var item = document.getElementById('todoInput').value 
     var text = document.createTextNode(item) 
     var newItem = document.createElement("li") 
     newItem.appendChild(text) 
     var checkbox = document.createElement('input'); 
      checkbox.type = "checkbox"; 
      checkbox.name = "name"; 
      checkbox.value = "value"; 
      checkbox.id = "id"; 
      newItem.appendChild(checkbox); 
    document.getElementById("todoList").appendChild(newItem) 
    }

Quelle

2017-02-21 04:46:46

Danke ich schätze die Hilfe aus dem Kommentar und Beispiel. – bemon

Ich glaube, dass Sie Checkbox, anstelle der Kugeln hinzufügen möchten. Der folgende Code macht das. Wenn Sie mehr über das Erstellen von "Todo-Liste" Anwendungen erfahren möchten, dann nehmen Sie Inspiration von TodoMVC

function todoList() { 
 
    var item = document.getElementById('todoInput').value; 
 
    var text = document.createTextNode(item); 
 
    var checkbox = document.createElement('input'); 
 
    checkbox.type = "checkbox"; 
 
    checkbox.name = "name"; 
 
    checkbox.value = "value"; 
 
    var newItem = document.createElement("div"); 
 
    
 
    newItem.appendChild(checkbox); 
 
    newItem.appendChild(text); 
 
    document.getElementById("todoList").appendChild(newItem) 
 
}

<!DOCTYPE html> 
 
<html> 
 
<body> 
 
<form id="todoForm"> 
 
    <h1>To Do List:<h1> 
 
    <input id="todoInput"> 
 
    <button type="button" onclick="todoList()">Add Item</button> 
 
</form> 
 
<div id="todoList"> 
 
</div> 
 
</body> 
 
</html>

Quelle

2017-02-21 04:48:11 uautkarsh

Danke, ich schätze die Hilfe. Ich werde diesen Link in Kürze hier sehen. Danke noch einmal. – bemon

Javascript Aufgabenliste

Antwort

Verwandte Themen