I'm puzzled by the "Uncaught TypeError:" error message and can't seem to figure it out

Question

I'm puzzled by the "Uncaught TypeError:" error message and can't seem to figure it out

I'm having trouble displaying the value of 'true' within my objects and keep encountering an error message.

Uncaught TypeError: Cannot set property 'toDoIsRemoved' of undefined  
  at removeTask (main.js:85)  
  at HTMLButtonElement.<anonymous> (main.js:56)

The error message points to an issue with line 56:

deleteButton.addEventListener('click', ()=>{removeTask(allTheToDos[i])});

Here is the entire function:

function generateHtml (){
    // Creating an Ul for my items
    let section = document.getElementById('mySection');
    let myUl = document.createElement('ul');
    myUl.className = 'listContainer';
    section.appendChild(myUl);

    // Creating the loop for my premade todo objects
    for(i=0; i<allTheToDos.length; i++){
        // Create a div wrapper for my li
        let myListWrapperItemContainer = document.createElement('div');
        myListWrapperItemContainer.className = 'listItemsWrapper';
        // Creating Checked button
        let checkedIcon = document.createElement('label');
        checkedIcon.className = 'checkedIcon listItemsIcon';
        checkedIcon.innerHTML = '<i class="fas fa-check"></i>';
        //Creating li
        let myLi = document.createElement('li');
        myLi.classList = 'listItem lineTrough';
        myLi.id= 'listItem';
        // Creating delete button
        let deleteButton = document.createElement('button');
        deleteButton.id ='deleteButton';
        deleteButton.className = 'trashCan listItemsIcon';
        deleteButton.innerHTML = '<i class="fas fa-trash-alt"></i>';
        // OnClick
        deleteButton.addEventListener('click', ()=>{removeTask(allTheToDos[i])});

        // Adding everything to my html
        myListWrapperItemContainer.appendChild(checkedIcon);
        myListWrapperItemContainer.appendChild(myLi);
        myListWrapperItemContainer.appendChild(deleteButton);
        myLi.innerHTML = allTheToDos[i].toDoItem;
        myUl.appendChild(myListWrapperItemContainer);
    }
}

and:

function removeTask (done){
    done.toDoIsRemoved = true;
    console.log(allTheToDos);
}

I am looking to be able to click on any button associated with my todos to change the value from false to true.

javascript arrays object

Answer 1

Answer №1

The issue arises when i is not defined using let. This causes the use of the global variable i, resulting in i being set to allTheToDos.length after iterating. Consequently, when the event handler is clicked, it uses this index, which is undefined.

Summarizing the problem:

const letters = ["a", "b", "c"];

// GLOBAL i
for (i = 0; i < letters.length; i++) {
  const button = document.createElement("button");
  button.append(letters[i]);
  button.setAttribute("type", "button");
  button.addEventListener("click", () => {
    // The line below is not within the loop, but triggered by a button click, occurring after the loop wraps up and i no longer satisfies i < letters.length
    console.log(i, letters[i]);
  });
  document.body.append(button);
}

The solution lies in defining i with let (avoid using var to prevent the same issue). Using let ensures that i is scoped to the block, where each iteration has a distinct i variable that only changes within the same block.

const letters = ["a", "b", "c"];

// Define i using let to scope it to the for-loop
for (let i = 0; i < letters.length; i++) {
  const button = document.createElement("button");
  button.append(letters[i]);
  button.setAttribute("type", "button");
  button.addEventListener("click", () => {
    console.log(i, letters[i]);
  });
  document.body.append(button);
}

Answer 2

The issue arises when i is not defined using let. This causes the use of the global variable i, resulting in i being set to allTheToDos.length after iterating. Consequently, when the event handler is clicked, it uses this index, which is undefined.

Summarizing the problem:

const letters = ["a", "b", "c"];

// GLOBAL i
for (i = 0; i < letters.length; i++) {
  const button = document.createElement("button");
  button.append(letters[i]);
  button.setAttribute("type", "button");
  button.addEventListener("click", () => {
    // The line below is not within the loop, but triggered by a button click, occurring after the loop wraps up and i no longer satisfies i < letters.length
    console.log(i, letters[i]);
  });
  document.body.append(button);
}

The solution lies in defining i with let (avoid using var to prevent the same issue). Using let ensures that i is scoped to the block, where each iteration has a distinct i variable that only changes within the same block.

const letters = ["a", "b", "c"];

// Define i using let to scope it to the for-loop
for (let i = 0; i < letters.length; i++) {
  const button = document.createElement("button");
  button.append(letters[i]);
  button.setAttribute("type", "button");
  button.addEventListener("click", () => {
    console.log(i, letters[i]);
  });
  document.body.append(button);
}

I'm puzzled by the "Uncaught TypeError:" error message and can't seem to figure it out

Answer №1

Similar questions

Having trouble accessing the root route in production environment

Setting attributes on an AngularJS Directive element in real time

Is it possible to obtain the parameters using an empty object with the getStaticPaths function?

The jQuery selector is unable to locate the IMG element using its unique ID

What is the functioning of the node.js next() middleware without any parameters supplied?

SSL-enabled Websocket server powered by websocket.io

What steps do I need to follow to utilize LiveReload with an AngularJS templateURL?

Having trouble exporting an object from a different JavaScript file in Node.js

The POST function isn't functioning correctly within the temp.js file

Choose from the select2 multiselect options and lock certain selected choices from being altered

Leveraging dynamic anchor tags within a Chrome extension

Can Vue allow for the inclusion of HTML elements to store data seamlessly?

Uploading and saving data to an object in FaunaDB using React hook forms

How can the input validation be displayed in Ajax when the user interacts with it?

Convert JavaScript object into distinct identifier

Loading scripts dynamically with async/await in JavaScript

Passing a class as a parameter in Typescript functions

Challenges with loading times in extensive AngularJS applications

Is your URL getting cut off in jQuery?

What could be causing the failure of the update for this computed property in my Vue 3 application?