javascript - 使用 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。我需要为每个跨度分配一个单独的 id，该 id 可以从我之前在代码中创建的名为 todoItem 的对象中获得。当我查看控制台时，虽然我不断收到错误“id is not defined”。我不明白为什么我不能在那里分配 id。关于如何修改我的代码以便我可以使用 todoItem id 分配 spanDone 的任何建议？

Answer 1

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

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