How can you manipulate the style of a element within a certain class (JS)

Question

I am attempting to create a to do list, and I want for the user to be able to press done, and the text gets crossed out. Here is the code I have so far.

HTML:

 <div class="task">
   <p class="taskText">Brush Teeth</p>
   <button class="edit">Edit</button>
   <button class="deleteTask">Delete</button>
   <button class="done">Done</button>
  </div>

<div class="task">
  <p class="taskText">Go to bed at 9</p>
  <button class="edit">Edit</button>
  <button class="deleteTask">Delete</button>
  <button class="done">Done</button>
</div>

JS:

// Iterate through all the task classes 
for (i = 0; i < task.length; i++){
    const done = task[i].getElementById("done"); // Select done button within the task class
    const taskText = task[i].getElementById("taskText"); // Select taskText within the task class

    // Cross out Text when User Hits Done Button
    done.addEventListener("click", function(){ 
        taskText.style.textDecoration = "line-through";
    });
}

I am getting an error:

app.js:57 Uncaught TypeError: Cannot read property 'addEventListener' of undefined at app.js:57

Does this answer your question? [Does ID have to be unique in the whole page?](https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page) — Mister Jojo, Sep 01 '20 at 23:47

score 1 · Accepted Answer · answered Sep 01 '20 at 23:45

The id attribute should be unique within a document, so you should use classes instead and use .querySelector to obtain the elements.

const tasks = document.querySelectorAll('.task');
for (let i = 0; i < tasks.length; i++){
  const done = tasks[i].querySelector(".done"); // Select done button within the task class
  const taskText = tasks[i].querySelector(".taskText"); // Select taskText within the task class

  // Cross out Text when User Hits Done Button
  done.addEventListener("click", function(){ 
    taskText.style.textDecoration = "line-through";
  });
}

<div class="task">
 <p class="taskText">Brush Teeth</p>
 <button class="edit">Edit</button>
 <button class="deleteTask">Delete</button>
 <button class="done">Done</button>
</div>

<div class="task">
<p class="taskText">Go to bed at 9</p>
<button class="edit">Edit</button>
<button class="deleteTask">Delete</button>
<button class="done">Done</button>
</div>

How can you manipulate the style of a element within a certain class (JS)

1 Answers1