Enfrenté este problema cuando hacía mi proyecto y no podía usar la función addEventListener. Así que creo un nuevo archivo e intento detectar el error, así que básicamente almacena un valor nulo en la variable, por eso no puedo usarlo. Cuando uso el mismo código en la consola, se ejecutó y dio el resultado esperado pero no con el código VS.
* Código JS
let elem7=document.getElementById("mainDiv") console.log(elem7)//prints null elem7.addEventListener('click',function(e){ console.log("You Clicked") })CÓDIGO HTML:
<body> <h3>Editable div</h3> <div id="mainDiv"> </div> </body>Simplemente agregue su etiqueta de id a su elemento <h3> .
Su <div> está vacío y, por eso, no se puede hacer clic en él.
let elem7=document.getElementById("mainDiv") console.log(elem7)//prints the whole HTML element elem7.addEventListener('click',function(e){ console.log("You Clicked") }) <body> <h3 id="mainDiv">Editable div</h3> <div> </div> </body>Pruebe esto y vea la consola, ¡podría funcionar!
let elem7=document.getElementById("mainDiv") console.log(elem7)//prints null elem7.addEventListener('click',function(e){ console.log("You Clicked") }) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="src/style.css"> </head> <body> <h3>Editable div</h3> <div id="mainDiv"> Click me </div> </body> </html>