Estoy tratando de cambiar el HTML interno de mi página para que se convierta en el HTML interno del elemento en el que hago clic, el único problema es que quiero que tome todo el elemento, como:
<section class="homeItem" data-detail="{"ID":"8","Name":"MacBook Air","Description":"2015 MacBook A…"20","Price":"899","Photo":"Images/Products/macbookAir.png"}"></section>Mientras que el código que he escrito en javascript:
function selectedProduct(event){ target = event.target; element = document.getElementById("test"); element.innerHTML = target.innerHTML; }apuntará al elemento específico en el que hago clic.
Lo que me gustaría lograr es que cuando haga clic en cualquier parte del elemento <section> , tomará el HTML interno de todo el elemento en lugar del específico en el que hice clic.
Supongo que tiene algo que ver con seleccionar el elemento principal del que se hace clic, pero no estoy seguro y no puedo encontrar nada en línea.
Si es posible, me gustaría mantenerme alejado de JQuery.
Creo que lo que necesitas es usar event.currentTarget . Esto contendrá el elemento que realmente tiene el detector de eventos. Entonces, si toda la <section> tiene el eventlistener event.target será el elemento en el que se hizo clic, la <section> estará en event.currentTarget .
De lo contrario, parentNode podría ser lo que está buscando.
Para usar el padre de un elemento, use parentElement :
function selectedProduct(event){ var target = event.target; var parent = target.parentElement;//parent of "target" }handleEvent(e) { const parent = e.currentTarget.parentNode; }