使用setAttribute分配id

Question

function createNewTodo(todoItem) {
    var li = document.createElement("li");
    li.setAttribute("id", todoItem.id);

    var spanTodo = document.createElement("span");
    spanTodo.innerHTML =
        todoItem.who + " needs to " + todoItem.task + " by " + todoItem.dueDate;

    var spanDone = document.createElement("span");
    spanDone.setAttribute("id", todoItem.id); //where I try to assign id
    if (!todoItem.done) {
        spanDone.setAttribute("class", "notDone");
        spanDone.innerHTML = "     ";
    }
    else {
        spanDone.setAttribute("class", "done");
        spanDone.innerHTML = " ✔ ";        
    }
    spanDone.setAttribute("id", todoItem.id);

    var spanDelete = document.createElement("span");
    spanDelete.setAttribute("id", todoItem.id);
    spanDelete.setAttribute("class", "delete");
    spanDelete.innerHTML = " ✗ ";

    spanDelete.onclick = deleteItem;
    spanDone.onclick = updateDone;

    li.appendChild(spanDone);
    li.appendChild(spanTodo);
    li.appendChild(spanDelete);

    return li;
}

function updateDone(e) {
  var spanClicked = e.target.id;
  console.log("you clicked this span" + id);
 }

我的目标是在用户点击时更新spanDone。我需要为每个span分配一个单独的id，我将从我之前在我的代码中创建的一个名为todoItem的对象中获取。当我查看我的控制台时，我仍然收到错误“id未定义”。我不明白为什么我不能在那里分配id。有关如何修改我的代码的任何建议，以便我可以使用todoItem id分配spanDone吗？

Answer 1

你的意思是改用你的变量吗？

function updateDone(e) {
  var spanClicked = e.target.id;
  console.log("you clicked this span" + spanClicked);
}