html:
<!DOCTYPE html> <html> <head> <script src="plm.js"></script> </head> <body> <h1 id="element">number</h1> <button onclick="bruh()">Add Num</button> </body> </html>js
let nr = 0 let change = document.getElementById("element") function bruh(){ nr = nr + 1 change.innerText = nr }Recibo este error "plm.js: 5 TypeError no detectado: no se pueden establecer propiedades de nulo (configurando 'innerText')
Sé que si escribo, por ejemplo document.getElementById(element).innerText = nr , funcionará, pero cuando usé replit para escribir código funcionó al ponerlo en una variable, pero en vscode no es lo mismo
Es probable que esta línea:
let change = document.getElementById("element")... se llama antes de que el #elemento h1 esté en el DOM.
Una solución rápida sería mover esta línea dentro de la devolución de llamada de clic como se muestra a continuación.
Una solución probablemente mejor sería aplazar la ejecución de su secuencia de comandos hasta un momento en que sepa que el elemento está en el dom, por ejemplo: evento DOMContentLoaded
Otras opciones, como han señalado los comentaristas, incluyen usar el atributo aplazar o mover la etiqueta <script> justo antes de la etiqueta de cierre </body> .
let nr = 0 function bruh(){ let change = document.getElementById("element") nr = nr + 1 change.innerText = nr } <h1 id="element">number</h1> <button onclick="bruh()">Add Num</button>Su archivo javascript se está ejecutando antes de que pueda acceder al DOM.
Cambia esto:
<script src="plm.js"></script>a esto:
<script src="plm.js" defer></script>https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attr-defer