error TS2339: Property 'style' does not exist on type

Question

my probleme is style is:

error TS2339: Property 'style' does not exist on type 'NodeListOf

all the details are explained below. all html / css are ok but just the "back" don't working

The HTML:

it's a element of my portafolio. and i want to play a video on click

Todo list

Todo list with React

Play video

---

my code in typescript:

import { Component } from '@angular/core';

@Component({ selector: 'app-portafolio', templateUrl: './portafolio.component.html', styleUrls: ['./portafolio.component.css'], }) export class PortafolioComponent {

 constructor() { const button = document.querySelectorAll('#btn'); const close = document.querySelectorAll('#close'); const videoContent = document.querySelectorAll('#videoContent'); button.addEventListener('click', () => { videoContent.style.visibility = 'visible'; videoContent.style.opacity = 1; }); close.addEventListener('click', () => { videoContent.style.visibility = 'hidden'; videoContent.style.opacity = 0; }); }

}

i'm not a expert, but i want to learn typescript, and i don't understand where is my error(s).

my tsconfig.json: "target": "ES2022", "module": "ES2022",

Answer 1

querySelectorAll is used to select multiple elements. For a single element, you should use querySelector .

The output type of querySelectorAll in TypeScript is NodeListOf<Element> , while the output of querySelector in JavaScript is an Element or null .

In TypeScript, it is typed as Element | null Element | null .

And on Element , you have style attribute.