javascript - setAttributeの問題

Question

function Todo(id, task, who, dueDate) {
    this.id = id;
    this.task = task;
    this.who = who;
    this.dueDate = dueDate;
    this.done = false;
}


function updateDone(e) { 
      var spanClicked = e.target;
      var id = spanClicked.parentElement.id;
      spanClicked.innerHTML = "&nbsp;&#10004;&nbsp;";
      spanClicked.setAttribute("class", "done");
      console.log("you clicked this span" + id);


      for(var i = 0; i < todos.length; i++) {
        if (todos[i].id == id) {
            var mark = todos[i];
            mark.setAttribute("class", "done");
            console.log(mark);
            break;
            }
           } 
    }

この関数の最初の部分は、オブジェクトが「完了」したことを示すためにWebページを更新します。2番目の部分は私が問題を抱えているところです。配列内で「完了」としてオブジェクトを更新しようとしています。アイデアは、ユーザーがクリックしたもののIDを配列内のIDと一致させ、setAttributeを使用して「完了」として設定することでした。ただし、console.log（mark）に対して表示されるコンソールメッセージはmark.setAttributeであり、関数ではありません。配列内のオブジェクトを「完了」として更新できるように、これを変更する方法に関する提案はありますか？

score 0 · Accepted Answer

for(var i = 0; i < todos.length; i++) {
    if (todos[i].id == id) {
        var element = document.getElementById(todos[i].id);
        element.setAttribute("class", "done");
        console.log(element);
        break;
    }
}

または、例の「マーク」がDOMオブジェクトでない場合は、完了プロパティをtrueに設定します。

for(var i = 0; i < todos.length; i++) {
    if (todos[i].id == id) {
        todos[i].done = true;
        console.log(todos[i]);
        break;
    }
}

score 0 · Accepted Answer

setAttribute でクラスを設定することは良い考えではありません。

//Works with FF and Chrome
obj.setAttribute("class", "done");

//works with IE
obj.setAttribute("className", "done");

//works with all browsers
obj.className = "done";