VS Code Intellisense for JavaScript is not working?

Question

I'm trying to loop over a bunch of buttons to give each of them an event listener that will change the background color once I click any of them, but vs code's IntelliSense won't autocomplete the desired property I'm looking for such .style .

code snippit

const buttons = document.querySelectorAll('btn');

for(let button of buttons) {
    button.addEventListener('click', () => {
        button.*style.backgroundColor* = 'red';
    })
}

HTML

<body>
    <section id="container">
        <button class="btn">Click me</button>
        <button class="btn">Click me</button>
        <button class="btn">Click me</button>
        <button class="btn">Click me</button>
    </section>
    <script src="app.js"></script>
</body>

VS Code intellisense won't recommend the italicized code .style and .backgroundColor

it's happening of both block and scope level as will as global level.

`querySelectorAll('btn')` selects all elements like this ``. Is that what you have in your HTML? — Luca Kiebel, Jan 06 '22 at 11:49
https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll — Luca Kiebel, Jan 06 '22 at 11:54
my problem is with the autocomplete If I were to type btn.style vs code won't recommend style after I do the dot notation. — Mohamed Hwedi, Jan 06 '22 at 11:59
Related: [addEventListener() only gets suggestions for the fullscreenchange and fullscreenerror events on element from document.querySelector. Why?](/q/75329414/11107541) — starball, Feb 25 '23 at 23:20

score 0 · Answer 1 · answered Jan 06 '22 at 12:16

The issue is that document.querySelectorAll is specified to give you a NodeList containing Element objects, a general base class. Thus each button is, as far as the JavaScript IntelliSense can infer, merely an instance of Element. But the style property exists on HTMLElement. Therefore you need to 'tell' the IntelliSense engine that buttons is going to be a NodeList of HTMLElement instead, which you can accomplish with a JSDoc:

/** @type {NodeListOf<HTMLElement>} */
const buttons = document.querySelectorAll('btn');

for(let button of buttons) {
    button.addEventListener('click', () => {
        button.style.backgroundColor = 'red';
    })
}

VS Code Intellisense for JavaScript is not working?

1 Answers1