Estaba tratando de hacer un contador de cuentas con botones, pero cuando presiono el botón, aparece este error:
Uncaught TypeError: Cannot set properties of null (setting 'innerText')Aquí está mi código HTML:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src=./test.js></script> <link rel="stylesheet" href=./test.css></link> </head> <body> <h1 id="count_el">0</h1> <button id="increase" onclick="increase()">INCREASE</button> <button id="decrease" onclick="decrease()">DECREASE</button> </body> </html>Y aquí está mi código JavaScript:
const count_el = document.getElementById("count_el") let count = 0 function increase(){ count += 1 count_el.innerText = count } function decrease(){ count -= 1 count_el.innerText = count }Intente y agregue defer en su etiqueta de secuencia de comandos de esta manera:
<script src=./test.js defer></script>esto hará que el javascript se cargue después de que la página se haya cargado y luego el error debería desaparecer.
Supongo que el problema con su código es que el script se ejecuta antes de que se haya cargado el dom, por lo que lo he editado para que se ejecute después de que se haya cargado la página. También agregué los detectores de eventos usando javascript en lugar de html.
if (document.readyState === "complete") onLoad(); else addEventListener("load", onLoad); function onLoad() { const countDom = document.querySelector("#count_el"), increaseButton = document.querySelector("#increase"), decreaseButton = document.querySelector("#decrease"); let count = 0; increaseButton.addEventListener("click", increase); decreaseButton.addEventListener("click", decrease); function increase() { count += 1; countDom.innerText = count; } function decrease() { count -= 1; countDom.innerText = count; } } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src=./test.js></script> <link rel="stylesheet" href=./test.css></link> </head> <body> <h1 id="count_el">0</h1> <button id="increase">INCREASE</button> <button id="decrease">DECREASE</button> </body> </html>También puede mover sus secuencias de comandos al final del cuerpo en lugar de dentro de la cabeza, pero es mejor tener secuencias de comandos seguras que se ejecutarán independientemente de la posición y el estado de la secuencia de comandos.
Parece que el único problema es la fase de carga de su código javascript: cuando intenta llamar a document.getElementById('count_el') no puede encontrar dicho elemento porque no está cargado en el DOM, así que para evitar que pueda usar el defer el atributo en su etiqueta de secuencia de script .
Hay tres formas principales de cargar un script js externo, y cito:
- Si
asyncestá presente: el script se descarga en paralelo al análisis de la página y se ejecuta tan pronto como esté disponible (antes de que se complete el análisis).- Si el
deferestá presente (y noasync): el script se descarga en paralelo al análisis de la página y se ejecuta después de que la página haya terminado de analizarse.- Si no está presente ni
asyncnidefer: el script se descarga y ejecuta inmediatamente, bloqueando el análisis hasta que se complete el script
const count_el = document.getElementById("count_el") let count = 0 function increase(){ count += 1 count_el.innerText = count } function decrease(){ count -= 1 count_el.innerText = count } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src=./test.js defer></script> <link rel="stylesheet" href=./test.css></link> </head> <body> <h1 id="count_el">0</h1> <button id="increase" onclick="increase()">INCREASE</button> <button id="decrease" onclick="decrease()">DECREASE</button> </body> </html>