Javascript To Doリスト

私はto-doリストアプリケーションを作ろうとしていて、リストに追加されるときに各アイテムの隣にクリック可能なチェックボックスを追加しようとしています。私はこれに非常に新しいです、どんな助けも大いに評価されるでしょう！Javascript To Doリスト

ありがとうございました！

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>

出典

2017-02-21 bemon

からインスピレーションを取る問題は何ですか？ –

一般的な意味で要素を作成して追加する方法を知っているようです（実際に表示されたコードが問題になります）。（新しいli要素の中にチェックボックスを入れたいのですが、作成してnewItemに追加してください） – nnnnnn

型、名前、値などのすべてを追加する必要があるかどうかは分かりませんでした。ありがとう返信のため – bemon

更新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) 
    }

出典

2017-02-21 04:46:46

ありがとう、私はコメントと例の助けを感謝します。 – bemon

私はあなたの代わりに弾丸を、チェックボックスを追加したいと考えています。以下のコードはそれを行います。あなたは「ToDoリスト」アプリケーションを作成する方法について詳細を知りたい場合は、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>

出典

2017-02-21 04:48:11 uautkarsh

ありがとう、私は助けていただきありがとうございます。私はそのリンクをすぐにチェックします。再度、感謝します。 – bemon

Javascript To Doリスト

答えて

関連する問題