Cómo se supone que debo seleccionar mi elemento que ha sido creado por función. La primera función funciona bien, pero mientras trato de seleccionar el elemento que se creó en esa función, no funciona
let d = document.querySelector(".lop"); let body = document.querySelector(".body"); d.addEventListener("click", function () { let c = document.createElement("p"); c.appendChild(document.createTextNode("lopas")); body.appendChild(c); }); document.querySelector("p").addEventListener("click", function () { console.log("Hi"); }); <!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> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="lop">s</div> <div class="body"></div> <script src="script.js"></script> </body> </html>Problema:
.lopp en absoluto.Solución:
c en lugar de querySelector. let d = document.querySelector(".lop"); let body = document.querySelector(".body"); d.addEventListener("click", function() { let c = document.createElement("p"); c.appendChild(document.createTextNode("lopas")); body.appendChild(c); c.addEventListener("click", function() { console.log("Hi"); }); }); <!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> </head> <body> <div class="lop">s</div> <div class="body"></div> </body> </html>Eso es porque está intentando adjuntar un evento de click a su etiqueta de paragraph antes de que se agregue al DOM.
Deberá mover este nuevo detector de eventos dentro de su onclick y después de agregarlo a su div .body .
Ejemplo:
let d = document.querySelector(".lop"); let body = document.querySelector(".body"); d.addEventListener("click", function () { let c = document.createElement("p"); c.appendChild(document.createTextNode("lopas")); body.appendChild(c); document.querySelector("p").addEventListener("click", function () { console.log("Hi"); }); });Según lo solicitado, así es como podría dividir algo de esto para que sean sus propios métodos para mayor claridad. Siéntase libre de usar su propio estilo como solo un ejemplo:
const onClickLop = (e) => { const el = document.createElement("p"); const bodyDiv = document.querySelector(".body"); el.appendChild(document.createTextNode("lopas")); bodyDiv.appendChild(el); el.addEventListener("click", onClickLopas); }; const onClickLopas = (e) => { console.log("Hi"); }); document.querySelector(".lop").addEventListener("click", onClickLop);El código para agregar el detector de eventos para el elemento p se ejecuta antes que el código que lo crea. Mueva el controlador de eventos a la primera función para que no se active hasta que se cree el elemento y se agregue al documento. Sin embargo, eso significará que cada vez que haga clic en el primer elemento, se creará una nueva p con su propio controlador (pregunta/respuesta separada).
Además, al hacerlo, puede consolidar algo de código.
let d = document.querySelector(".lop"); let body = document.querySelector(".body"); d.addEventListener("click", function () { let c = document.createElement("p"); c.appendChild(document.createTextNode("lopas")); c.addEventListener("click", function () { console.log("Hi"); }); body.appendChild(c); }); <!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> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="lop">s</div> <div class="body"></div> <script src="script.js"></script> </body> </html>