Javascript To Do List

Я пытаюсь создать приложение списка дел и пытаюсь добавить флажок рядом с каждым элементом, который будет добавлен в список, поскольку он добавлен в список. Я очень новичок в этом, поэтому любая помощь будет принята с благодарностью!Javascript To Do List

Спасибо!

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

Update 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

ответ

Смежные вопросы