Type Script is throwing an unidentified error being encountered

Question

Type Script is throwing an unidentified error being encountered

I am a beginner in Type Script and I'm attempting to convert a small piece of javascript code into typescript, but I keep encountering an error: typeError list[i] is undefined. Here is my original js code:

function handleDragStart(e) {
  this.style.opacity = '0.4';  // this / e.target is the source node.
}

var cols = document.querySelectorAll('#columns .column');
[].forEach.call(cols, function(col) {
  col.addEventListener('dragstart', handleDragStart, false);
});

Here is the fiddle I attempted: https://jsfiddle.net/hahkarthick/8cwcb970/3/

javascript typescript

Answer 1

Answer №1

Instead of using list[i], it is recommended to directly use the variable i.

Make sure to pass the function name instead of false in the code snippet below.

i.addEventListener("dragstart", functionName);

Complete code :-

    class col {
  itrate(): any {
    let list: any = document.querySelectorAll("#columns .column");
    let i:any;
    for ( i of list) {
        console.log(i);
      console.log(list[i]);
      i.addEventListener("dragstart", this.dragStart);
    }
  }
  dragStart(event): any{
    console.log(event);
  }
}
let colz: any = new col();
colz.itrate();

Fiddle Link :- working code

Answer 2

Instead of using list[i], it is recommended to directly use the variable i.

Make sure to pass the function name instead of false in the code snippet below.

i.addEventListener("dragstart", functionName);

Complete code :-

    class col {
  itrate(): any {
    let list: any = document.querySelectorAll("#columns .column");
    let i:any;
    for ( i of list) {
        console.log(i);
      console.log(list[i]);
      i.addEventListener("dragstart", this.dragStart);
    }
  }
  dragStart(event): any{
    console.log(event);
  }
}
let colz: any = new col();
colz.itrate();

Fiddle Link :- working code

Answer 3

Answer №2

Using the for of loop, the current item is stored in the variable i, rather than its index. Therefore, you should simply use i instead of list[i].

Your function should be structured like this:

iterate(): any {
   let list: any = document.querySelectorAll("#columns .column");
   for (let i of list) {
     console.log(i);
     i.addEventListener("dragstart", false);
   }
}

Additionally, make sure to provide a function as the second parameter for the addEventListener method to avoid errors.

Answer 4

Using the for of loop, the current item is stored in the variable i, rather than its index. Therefore, you should simply use i instead of list[i].

Your function should be structured like this:

iterate(): any {
   let list: any = document.querySelectorAll("#columns .column");
   for (let i of list) {
     console.log(i);
     i.addEventListener("dragstart", false);
   }
}

Additionally, make sure to provide a function as the second parameter for the addEventListener method to avoid errors.

Type Script is throwing an unidentified error being encountered

Answer №1

Answer №2

Similar questions

Deleting the clone <div> while ensuring the main <div> is kept clear of any remaining data

Iterating through a jQuery function to increment value

What is the best way to utilize JSON data stored in a Jekyll _data folder?

What is the best method for retrieving data from a specific collection in MongoDB?

Can TypeScript accurately perform the _.invert function?

Tips for keeping the most recently opened accordion in a group by using the is-open attribute to call a function

NextJS is throwing an error stating that the element type is invalid. It was expecting either a string for built-in components or a class/function for composite components, but instead received an object

Creating a visually stunning image grid akin to the meticulously designed layouts found

What is the best way to connect users for chatting?

Adjust a parameter within a MongoDB array entity

Filter an array of objects in Javascript based on a key present in another array of objects

What is the best way to narrow down the content cards displayed on the page?

JavaScript method for altering the values of variables

Event callback type narrowing based on the specific event key

Are you experiencing difficulty loading ng-view in AngularJs?

What is the process for retrieving the array of points from a polygon shape?

Using a JSON key as a parameter in a function

What is the best way to retrieve data based on conditions in React?

Is there a clash with another code causing issues in troubleshooting a straightforward jQuery function?

Angular 2/4 throws an Error when a Promise is rejected