用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); 
}