Next.js: Add 'style' to element in event-listener

WKD-Development 0
Viewed 14

As in the title descriped, i tray to add style to an dom-element in nexts.js Typescript and i get "Property 'style' does not exist on type 'Element' " message in Visual Studio Code. I cant figure out what is the problem and via google search i cant get to the answwer. Maybe because i dont understand the problem, so its really hard to say if i ask the right question...

Some can give me a hint?

enter image description here

next.js reactjs typescript javascript
1 Answers

You already have the elements, and you already check if they exist, so there is no need to call document.querySelector again:

anchor.style.filter = `hue-rotate(${angleDeg}deg)`;
pupil.style.transform = `rotate(${90 + angleDeg}deg)`;

And also, you should mark the result from querySelector to HTMLElement by giving it the generic parameter since it'll complain that style doesn't exist on type Element:

const anchor = document.querySelector<HTMLElement>("#anchor");
const pupil = document.querySelector<HTMLElement>("#pupil");

If needed, you can change HTMLElement to a more specific type. For example, if anchor is an a tag, you can change it to HTMLAnchorElement.

Also, make sure to subscribe to Fireship if you have't already :x

caTS0
Related