[英]How to make delete button and complete buttons work on ToDO List Javascript
我正在用 Javascript 創建一個待辦事項列表,但我不確定如何讓我的刪除/完成按鈕起作用。 當我點擊我的刪除按鈕時,我希望它刪除li
,當我點擊完成按鈕時,我希望我的li
背景更改為`#51DF70 的背景。 到目前為止,當我點擊刪除/完成按鈕時,它會提醒我,所以我知道它們正在工作
這是我到目前為止的代碼和我的Codepen,如果有幫助的話
var input = document.getElementById('userInput');
var enterButton = document.getElementById('enter');
var deleteButtons = document.getElementsByClassName("Remove");
for (var i = 0; i < deleteButtons.length; i++) {
deleteButtons[i].addEventListener('click', deleteListItem, false);
}
var completeButtons =
document.getElementsByClassName("Complete");
for (var i = 0; i < completeButtons.length; i++) {
completeButtons[i].addEventListener('click', completeListItem, false);
}
var ul = document.querySelector('ul');
function inputLength() {
return input.value.length;
};
function listLength() {
return item.length;
}
function createListElement() {
var li = document.createElement('li');
li.appendChild(document.createTextNode(input.value));
//makes text node
var clonedButton =
document.getElementById("buttons").cloneNode(true);
clonedButton.childNodes[1].addEventListener('click', deleteListItem, false);
clonedButton.childNodes[3].addEventListener('click', completeListItem, false);
li.appendChild(clonedButton);
ul.appendChild(li);
input.value = "";
}
function deleteListItem() {
alert("Yuh");
// li.classList.add("delete");
}
function completeListItem() {
alert("Item was completed");
li.classLi
}
function addListAfterClick() {
if (inputLength() > 0) {
createListElement();
}
}
// Hit enter key and create list
function addAfterPress(event) {
if (inputLength() > 0 && event.which === 13) {
createListElement();
}
}
enterButton.addEventListener('click', addListAfterClick);
input.addEventListener('keypress', addAfterPress);
li
是刪除和完成按鈕的祖父節點(父節點是buttons
的克隆)。 所以你要:
function deleteListItem() {
var li = this.parentNode.parentNode;
li.remove();
}
function completeListItem() {
var li = this.parentNode.parentNode;
li.classList.add("Complete");
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.