CODEWITHSUNDEEP
javascriptangulartypescript
Emad Dehnavi
Emad Dehnavi

Reputation: 3451

Typescript : Property 'data' dose not exist on type HTMLElement

I try to get all elemets which have a class name in typescript and need to check something on data property of each element, this is what I came so far : 

let getTopElements :NodeListOf<HTMLElement>  = document.querySelectorAll('.timeline-row');
var newArr: HTMLElement[] = Array.prototype.slice.call(getTopElements);

if (getTopElements){
  for (let element of newArr){
    if (element.data('options') && element.data('options').type === 'TOP')   {
       this.player.currentTime(element.data('options').end).pause();
     }
   }
 }

But in my if condition line, I get this error on data Property 'data' dose not exist on type HTMLElement

Am i doing this wrong?

Upvotes: 0

Views: 1670

Answers (1)

cyr_x
cyr_x

Reputation: 14267

Because data() is a method from jQuery to get data attributes. You should use the dataset property to modify and read data attributes. Also keep in mind that you can only store string values in a data attribute:

 const data = element.dataset;
 data.optionsType = 'TOP';
 if (data.optionsType === 'TOP')   {
   this.player.currentTime(data.optionsEnd).pause();
 }

Another option would be to use getAttribute('data-*') to get the value or setAttribute('data-*', value) to set the value.

You could have a look at the MDN page for a tutorial how to properly use data attributes.

Upvotes: 2

Related Questions