Estoy tratando de recorrer un montón de botones para darles a cada uno de ellos un detector de eventos que cambiará el color de fondo una vez que haga clic en cualquiera de ellos, pero IntelliSense de vs code no completará automáticamente la propiedad deseada que estoy buscando. estilo .
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>Intellisense de VS Code no recomendará el código en cursiva .style y .backgroundColor
está sucediendo tanto a nivel de bloque como de alcance, así como a nivel global.
El problema es que se especifica document.querySelectorAll para brindarle una lista de NodeList que contiene objetos Element , una clase base general. Por lo tanto, cada button es, en la medida en que JavaScript IntelliSense puede inferir, simplemente una instancia de Element . Pero la propiedad de style existe en HTMLElement . Por lo tanto, debe "decirle" al motor de IntelliSense que los buttons serán una lista de HTMLElement NodeList lo que puede lograr con un JSDoc:
/** @type {NodeListOf<HTMLElement>} */ const buttons = document.querySelectorAll('btn'); for(let button of buttons) { button.addEventListener('click', () => { button.style.backgroundColor = 'red'; }) }