0

Got this ToDoList app

All good, but after I insert a new activity (a new table) the buttons are not responsive even though I give them the classes and trigger the eventListeners.

Atm, my DOM consts are at the top of the JS page, but even when I moved them after the insertion of a new table (activity) in the JS page, still doesn't work.

tldr:

  • remove and check buttons work with html that is preset on the page;
  • remove and check buttons don't work with html that is inserted with js
newDiv.innerHTML = `<table class="table table-dark">
  <thead>
    <tr>
      <th scope="col">Title</th>
      <th scope="col">Priority</th>
      <th scope="col">Description</th>
      <th scope="col">Date</th>
      <th scope="col">Tasks</th>
      <th scope="col">Completed</th>
      <th scope="col">Remove</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">${newActivity.title}</th>
      <td>${newActivity.priority}</td>
      <td>${newActivity.description}</td>
      <td>${newActivity.date}</td>
      <td><i class="fas fa-sitemap"></i></td>
      <td><span class ='check-button'>X</span></td>
      <td><i class="fas fa-archive remove-button"></i></td>
    </tr>
  </tbody>
</table>`;
Alessio Cantarella
  • 5,077
  • 3
  • 27
  • 34
octaviandd
  • 169
  • 2
  • 19
  • 1) `document.querySelector()` only returns the very first match 2) even if you used `document.querySelectorAll()` instead, you'd get a NodeList containing only elements existing at the time of the call –  Dec 30 '19 at 18:43
  • you need to change your back ticks to single quotes 'Title'+ 'Priority'+ the problem is in back tiks ` – Stefan Avramovic Dec 30 '19 at 20:04

0 Answers0