Undefined Error in Type Script

Question

I am new to Type Script and i am Trying to convert a small piece of javascript code to typescript & getting an error: typeError list[i] is undefined. Here is my Actual js:

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 My Tried fiddle https://jsfiddle.net/hahkarthick/8cwcb970/3/

Lalit · Accepted Answer · 2018-01-12 13:31:17Z

3

Use i directly instead of list[i].

Also you will have to pass function name instead of false in below code.

i.addEventListener("dragstart", false);

Full 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

edited Jan 12, 2018 at 13:31

answered Jan 12, 2018 at 13:25

Lalit

1,3691 gold badge8 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Harish Karthick Over a year ago

Ya i Tried That also and Getting Error: Argument 2 of EventTarget.addEventListener is not an object.

Harish Karthick Over a year ago

Now Getting Reference Error: i is not defined

Lalit Over a year ago

@HarishKarthick Check again actually it is due to line i.addEventListener("dragstart", false); added above the code.

Lalit Over a year ago

@HarishKarthick I have added js fiddle link also.

Suren Srapyan · Accepted Answer · 2018-01-12 13:24:47Z

2

When you use for of, your i is the current item, not it's index. So you just need to use i, not list[i].

Your function need to look like this.

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

One more thing, you will get an error because the second parameter of addEventListener must be a function. Pass a function into.

answered Jan 12, 2018 at 13:24

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

4 Comments

Harish Karthick Over a year ago

Thanks For You Help and Can you suggest me how to archive that @SurenSrapyan

indexoutofbounds Over a year ago

@SurenSrapyan rejecting an edit with a working fiddle was is a little weird though, but whatever.

Suren Srapyan Over a year ago

OP is working with dragstart, not just showing alert

indexoutofbounds Over a year ago

@SurenSrapyan He does not in his fiddle. But I guess you have not had a look at it.

Collectives™ on Stack Overflow

Undefined Error in Type Script

2 Answers 2

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related