He escrito un código simple para seleccionar la clase HTML div y aplicarle un detector de eventos. Pero mi selector de consulta da un valor nulo en la consola. Lo intenté varias veces, pero no puedo obtener una razón clara para ello.
<!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> <style> body{ display: flex; justify-content: center; align-items: center; } .grandparent { position: relative; height: 60vh; width: 60vh; background-color: red; margin-top: 10%; } .parent { position: absolute; height: 40vh; width: 40vh; background-color: blue; top: 50%; left: 50%; transform: translate(-50%, -50%); } .child { position: absolute; height: 25vh; width: 25vh; background-color: green; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> <script> const grandparent = document.querySelector('.grandparent'); const parent = document.querySelector('.parent'); const child = document.querySelector('.child'); console.log(parent); /* grandparent.addEventListener('click', e=> { console.log(e); });*/ </script> </head> <body> <div class="grandparent"> <div class="parent"> <div class="child"> </div> </div> </div> </body> </html>He escrito un código simple para seleccionar la clase HTML div y aplicarle un detector de eventos. Pero mi selector de consulta da un valor nulo en la consola. Lo intenté varias veces, pero no puedo obtener una razón clara para ello.