Question

我正在创建一个简单的待办事项清单。我坚持完成待办事项的功能。我为处理此事件而设置的事件监听器似乎是对初始的“添加”按钮而不是“完成”按钮做出了响应。

我试图逐步执行代码，但似乎我没有正确理解事件侦听器和/或Javascript的动态方式。下面的代码（删除了所有不相关的内容）

HTML：

<h1>To Do List</h1>
<input id="item" type="text">
<button id="add">Add</button>
<ul id="list"></ul>

Javascript：

var item = document.getElementById("item");
var add = document.getElementById("add");
var list = document.getElementById("list");
var counter = 0;

add.addEventListener("click",addItem);
clear.addEventListener("click",clearItems);

function addItem(){
    var li = document.createElement("li");
    li.id="li"+counter;
    var itemVal = document.createTextNode(item.value);
    var doneButton = document.createElement("button");
    doneButton.innerHTML = "Done";
    li.appendChild(itemVal);
    li.appendChild(doneButton);
    list.appendChild(li);
    doneButton.addEventListener("click",itemCompleted(li.id,itemVal));
    item.value="";
    counter++;
}

function itemCompleted(elementID,value){
            window.alert("Should only show after clicking 'Done' for an item")
}

JS-我是否正确使用addEventListener？

0 个答案: