Javascript To Do List，Checkbox，strike，and edit/delete items

-3

image1我需要做這個清單程序html,css和javascript（不使用jquery）。附加示例的圖像。Javascript To Do List，Checkbox，strike，and edit/delete items

Current progress 這是我到目前爲止。但是，我還沒有想出如何將刪除和編輯選項添加到每個列表項中。

<!doctype html> 
<html> 
<head> 
<title>To Do List</title> 
<link rel="stylesheet" type="text/css" href="ToDoList.css"> 
</head> 
<body> 
<h1> To Do List</h1> 
<div id = "listBox"> 
<input type="text" id="inItemText"><button id = "btnAdd">Add</button> 
</div> 
<div class="tasks-parent"> 
     <h4>Tasks:</h4> 
<ul id = "todolist"> 
</ul> 
</div> 
<script src ="ToDoList.js"></script> 
</body> 
</html> 

#btnAdd { 
text-transform: uppercase; 
background: #22B473; 
border: none; 
border-radius: 3px; 
font-weight: bold; 
color: #FFF; 
padding: 3px 10px; 
cursor: pointer; 
width: auto; 
} 

.tasks-parent{ 
border: 2px solid #777; 
margin-top: 5px; 
width: 17%; 
} 

html{ 
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
} 

ul{ 
list-style: none; 
padding: 0; 
margin: 0; 
width: 400px; 
} 

li{ 
padding: 5px 10px; 
color: #000; 
} 

li span { 
padding-left: 17px; 
} 

function updateItemStatus(){ 
var cbId = this.id.replace("cb_", ""); 
var itemText = document.getElementById("item_" + cbId); 

if(this.checked){ 
itemText.style.textDecoration = "line-through"; 
} 
else{ 
itemText.style.textDecoration = "none"; 
} 

} 


function addNewItem(list, itemText) { 

var date = new Date(); 
var id = "" + date.getMinutes(); + date.getSeconds() + 
    date.getMilliseconds() + ""; 

var listItem = document.createElement("li"); 
listItem.id = "li_" + id; 

var checkBox = document.createElement("input"); 
checkBox.type = "checkbox"; 
checkBox.id = "cb_" + id; 
checkBox.onclick = updateItemStatus; 

var span = document.createElement("span"); 
span.id = "item_" + id; 
span.innerText = itemText; 


listItem.appendChild(checkBox); 
listItem.appendChild(span); 

list.appendChild(listItem); 
} 

var inItemText = document.getElementById("inItemText"); 
inItemText.focus(); 

var btnNew = document.getElementById("btnAdd"); 
btnNew.onclick = function(){ 
var inItemText = document.getElementById("inItemText"); 

var itemText = inItemText.value; 
if(!itemText || itemText === "" || itemText === " "){ 
    return false; 
} 

addNewItem(document.getElementById("todolist"), itemText); 
}; 

inItemText.onkeyup = function(event) { 

if(event.which == 13){ 
var itemText = inItemText.value; 

if(!itemText || itemText === "" || itemText === " "){ 
    return false; 
} 

addNewItem(document.getElementById("todolist"), itemText); 

inItemText.focus(); 
inItemText.select(); 
} 

};

來源

2016-03-15 DeemStarr

你有什麼到目前爲止已經試過？ –

你知道堆棧是一個編程**幫助**板？不是PHP的外賣.. – Roboroads

這是我的代碼。這不是完美的，我沒有測試它，但我希望它有幫助。

var todo_items = 0; 
 
window.onload = function(){ 
 
\t 
 
    var todo = document.getElementById("todo"); 
 
    var todo_form = todo.querySelector("#todo-form"); 
 
    todo_form.onsubmit = function(e){ 
 
    var todo_input = e.target.querySelector("input[name='todo']"); 
 
    var todo_name; 
 
    if(todo_input.dataset.edit == "true"){ 
 
     var todo_item_id = todo_input.dataset.id; 
 
     todo_name = todo.querySelector(".tasks #item" + todo_item_id + " .todo-name"); 
 
     todo_name.textContent = todo_input.value; 
 
     todo_input.dataset.edit = false; 
 
     todo_input.dataset.id = ""; 
 
    }else{ 
 

 
     var todo_value = todo_input.value; 
 

 
     var item = document.createElement("tr"); 
 
     item.id = "item"+todo_items; 
 

 
     var todo_check = document.createElement("td"); 
 
     todo_check.setAttribute("class", "check fa fa-square"); 
 
     todo_check.dataset.id = todo_items; 
 
     todo_check.dataset.checked = false; 
 
     todo_check.onclick = function(e){ 
 
     var todo_item_id = e.target.dataset.id; 
 
     var todo_name = todo.querySelector(".tasks #item" + todo_item_id + " .todo-name"); 
 
     if(e.target.dataset.checked == "true"){ 
 
      e.target.setAttribute("class", "check fa fa-square"); 
 
      todo_name.style.textDecoration = ""; 
 
      e.target.dataset.checked = false; 
 
     }else{ 
 
      e.target.setAttribute("class", "check fa fa-check-square"); 
 
      todo_name.style.textDecoration = "line-through"; 
 
      e.target.dataset.checked = true; 
 
     } 
 
     }; 
 
     item.appendChild(todo_check); 
 

 
     todo_name = document.createElement("td"); 
 
     todo_name.setAttribute("class","todo-name"); 
 
     todo_name.textContent = todo_value; 
 
     item.appendChild(todo_name); 
 

 
     var edit_delete = document.createElement("td"); 
 

 
     var edit_button = document.createElement("a"); 
 
     edit_button.href = "#"; 
 
     edit_button.textContent = "Edit"; 
 
     edit_button.dataset.id = todo_items; 
 
     edit_button.onclick = function(e){ 
 
     var todo_item_id = e.target.dataset.id; 
 
     var todo_name = todo.querySelector(".tasks #item" + todo_item_id + " .todo-name"); 
 
     var todo_input = todo.querySelector("#todo-form input[name='todo']"); 
 
     todo_input.value = todo_name.textContent; 
 
     todo_input.dataset.edit = true; 
 
     todo_input.dataset.id = todo_item_id; 
 

 
     return false; 
 
     }; 
 
     edit_delete.appendChild(edit_button); 
 

 
     edit_delete.appendChild(document.createTextNode(" | ")); 
 

 
     var delete_button = document.createElement("a"); 
 
     delete_button.href = "#"; 
 
     delete_button.textContent = "Delete"; 
 
     delete_button.dataset.id = todo_items; 
 
     delete_button.onclick = function(e){ 
 
     var todo_item_id = e.target.dataset.id; 
 
     var todo_item = todo.querySelector(".tasks #item" + todo_item_id); 
 
     todo_item.parentNode.removeChild(todo_item); 
 
     return false; 
 
     }; 
 
     edit_delete.appendChild(delete_button); 
 

 
     item.appendChild(edit_delete); 
 

 
     var tasks = todo.querySelector(".tasks"); 
 
     tasks.appendChild(item); 
 

 
     todo_items++; 
 
    } 
 
    return false; 
 
    }; 
 
};

*{ 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html{ 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
} 
 
#todo{ 
 
    position: absolute; 
 
    left: 50%; 
 
    width: 400px; 
 
    margin-left: -200px; 
 
} 
 
#todo h3{ 
 
    padding: 10px 5px; 
 
} 
 
#todo h4{ 
 
    padding: 10px 0; 
 
} 
 
.tasks-parent{ 
 
    border: solid 2px #777; 
 
    margin: 5px; 
 
    padding: 5px; 
 
} 
 
#todo #todo-form input{ 
 
    padding: 3px; 
 
    border: solid 2px #888; 
 
    margin: 0 0 0 5px; 
 
    width: 200px; 
 
} 
 

 
#todo #todo-form input[type=submit]{ 
 
    text-transform: uppercase; 
 
    background: #22B473; 
 
    border: none; 
 
    -webkit-border-radius: 3px; 
 
    -moz-border-radius: 3px; 
 
    border-radius: 3px; 
 
    font-weight: bold; 
 
    color: #FFF; 
 
    padding: 3px 10px; 
 
    cursor: pointer; 
 
    width: auto; 
 
} 
 
.tasks{ 
 
    width: 100%; 
 
} 
 
.tasks .check{ 
 
    color: #29ABE1; 
 
    width: 20px; 
 
    cursor: pointer; 
 
} 
 
.tasks .todo-name{ 
 
    width: 250px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
    <div id="todo"> 
 
     <h3>To-Do List</h3> 
 
     <form action="#" id="todo-form"> 
 
      <input type="text" placeholder="To-do" name="todo" /> 
 
      <input type="submit" value="Add"/> 
 
     </form> 
 
     <div class="tasks-parent"> 
 
      <h4>Tasks:</h4> 
 
      <table class="tasks"> 
 
      </table> 
 
     </div> 
 
    </div>

來源

2016-03-15 10:39:07 alwintje

這很好，除了當我運行的代碼，沒有顯示覆選框。爲什麼會這樣？該功能起作用並且任務被劃掉，但複選框未被創建？ – DeemStarr

我認爲這是因爲你需要包含 [font-awesome]（http://fortawesome.github.io/Font-Awesome/get-started/） – alwintje

Javascript To Do List，Checkbox，strike，and edit/delete items

回答

相關問題