title: Uncaught TypeError: Cannot read properties of undefined (reading 'isDone')
body: <p>The functionality works just fine, however, I get this error in the console when clicking the trash icon while deleting the todo item.</p>
  <pre><code>    Uncaught TypeError: Cannot read properties of undefined (reading 'isDone')
          at TodoList.done_undone (script.js:68)
          at HTMLLIElement.&lt;anonymous&gt; (script.js:104)
      done_undone @ script.js:68
      (anonymous) @ script.js:104
  </code></pre>
  <p>Here is the link to the live page: <a href="https://sarahschlueterportfolio.z22.web.core.windows.net/todolist.html" rel="nofollow noreferrer">https://sarahschlueterportfolio.z22.web.core.windows.net/todolist.html</a></p>
  <p>Here is my code:</p>
  <p>HTML</p>
  <pre><code>    &lt;!-- Page Content --&gt;
      &lt;div class=&quot;container&quot;&gt;
  
          &lt;div class=&quot;todoHeader&quot;&gt;
              &lt;h1&gt;My To Do List&lt;/h1&gt;
              &lt;input type=&quot;text&quot; id=&quot;userInput&quot; placeholder=&quot;Things to be done...&quot; /&gt;
              &lt;span class=&quot;addButton&quot; id=&quot;add_button&quot;&gt;Add&lt;/span&gt;
          &lt;/div&gt;
          &lt;ul id=&quot;todoListItems&quot;&gt;
          &lt;/ul&gt;
  
      &lt;/div&gt;
      &lt;!-- /.container --&gt;
  </code></pre>
  <p>JS</p>
  <pre><code>
      const todoObjectList = [];
      
      class TodoList {
          constructor(item){
              this.ulElement = item;
          }
      
          add() {
              const todoInput = document.querySelector(&quot;#userInput&quot;).value;
      
              if (todoInput == &quot;&quot;) {
                  alert(&quot;Please enter an item.&quot;)
              } else {
                  const todoObject = {
                      id : todoObjectList.length,
                      todoText : todoInput,
                      isDone : false,
                  }
              
              todoObjectList.unshift(todoObject); 
              this.display();
              document.querySelector(&quot;#userInput&quot;).value = ''; 
              }
          }
      
          done_undone(x) {
              const selectedTodoIndex = todoObjectList.findIndex((item) =&gt; item.id == x);
              todoObjectList[selectedTodoIndex].isDone == false ? todoObjectList[selectedTodoIndex].isDone = true : todoObjectList[selectedTodoIndex].isDone = false;
              console.log(todoObjectList[selectedTodoIndex].isDone);
              this.display();
          }
      
      
          deleteElement(z) {
              const selectedDelIndex = todoObjectList.findIndex((item) =&gt; item.id == z);
              todoObjectList.splice(selectedDelIndex,1);
              this.display();
          }
      
          display() {
              this.ulElement.innerHTML = &quot;&quot;;
              
              todoObjectList.forEach((objectItem) =&gt; {
                  
                  const liElement = document.createElement(&quot;li&quot;);
                  const delButton = document.createElement(&quot;i&quot;);
                  
                  liElement.innerText = objectItem.todoText;
                  liElement.setAttribute(&quot;data-id&quot;, objectItem.id);
                  
                  delButton.setAttribute(&quot;data-id&quot;, objectItem.id);
                  delButton.classList.add(&quot;far&quot;, &quot;fa-trash-alt&quot;); 
      
                  liElement.appendChild(delButton);
      
                  delButton.addEventListener(&quot;click&quot;, function(e) {
                      const deleteId = e.target.getAttribute(&quot;data-id&quot;);
                      personalTodoList.deleteElement(deleteId);
                  })
                  liElement.addEventListener(&quot;click&quot;, function(e) {
                      const selectedId = e.target.getAttribute(&quot;data-id&quot;);
                      personalTodoList.done_undone(selectedId);
                  })
                  if (objectItem.isDone) {
                      liElement.classList.add(&quot;checked&quot;);
                  }
                  this.ulElement.appendChild(liElement);
              })
          }
      }
      
      const listSection = document.querySelector(&quot;#todoListItems&quot;);
      
      personalTodoList = new TodoList(listSection);
      
      document.querySelector(&quot;.addButton&quot;).addEventListener(&quot;click&quot;, function() {
          personalTodoList.add()
      })
  
  </code></pre>
  <p>I have tried looking up different solutions. One recommended putting the script at the bottom of my html instead of the top, that made no difference.</p>
  <p>I'm fairly certain there is something wrong with the line of code before the console log in the done_undone method.</p>
  <p>Any insight on how to clear this error would be greatly appreciated!</p>