entonces hay un detector de eventos que va a dar su propio HTML a la función llamada aww con event.currenttarget para renderizarlo nuevamente con innerHTML, lo paso con una const llamada elegir cuando registro la elección , da el HTML correctamente pero cuando renderizo la página en su lugar, esto aparecerá: [object HTMLDivElement] así que intenté usar JSON. parse en él para eliminar la cadena, pero no funcionó:
document.querySelector(".h1").addEventListener("click",aaw) document.querySelector(".h2").addEventListener("click",aaw) document.querySelector(".h3").addEventListener("click",aaw) function aaw(event) { const choose = event.currentTarget document.body.innerHTML = ` <div class="container"> ${ choose} <div class="monster"> <div class="monster-up"> <h2>mordkaiser</h2> <div class="outside-bar"> <div class="inside-bar"> </div> </div> </div> <div class="monster-down"> <div class="dicerools"> </div> </div> </div> <button>attack</button> </div> ` } ¿Cómo podemos poner ese e.currenttarget en el literal de la plantilla para usarlo con innerHTML?
Está tratando de interpolar un nodo, tipo de objeto, con una cadena, lo que molestamente le dará [object Object] o, en su caso, [object HTMLDivElement] . Si desea incrustar el HTML del nodo, puede acceder fácilmente a él con el atributo innerHTML :
const choose = event.currentTarget.innerHTML; // <-- Will return something like "<div>hello</div>"Y se representará como HTML en su interpolación de cadenas.
Si desea que el HTML incluya a su padre, simplemente cambie el HTML innerHTML a outerHTML :
const choose = event.currentTarget.outerHTML; // <-- Will return something like "<div><div id="child">blah</div>helllo<button>cool</button></div>"