Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Can you target an elements parent element using event.target?

I am trying to change the innerHTML of my page to become the innerHTML of the element I click on, the only problem is that i want it to take the whole element such as:

<section class="homeItem" data-detail="{"ID":"8","Name":"MacBook Air","Description":"2015 MacBook A…"20","Price":"899","Photo":"Images/Products/macbookAir.png"}"></section> 

Whereas the code that i have written in javascript:

function selectedProduct(event){   target = event.target;   element = document.getElementById("test");   element.innerHTML = target.innerHTML; } 

will target the specific element that i click on.

What i would like to achieve is when i click on anywhere in the <section> element, that it will take the innerHTML of the whole element rather than the specific one that i have clicked.

I would presume it is something to do with selecting the parent element of the one that is clicked but i am not sure and can't find anything online.

If possible i would like to stay away from JQuery

like image 672
Adam Avatar asked Mar 20 '15 14:03

Adam


People also ask

What properties does event target have?

The target event property returns the element that triggered the event. The target property gets the element on which the event originally occurred, opposed to the currentTarget property, which always refers to the element whose event listener triggered the event.

Which element is event target in the event object?

When an event is fired, the element that fires the event is known as the emitter. This element is what we call the target. So, the target property of that event object refers to the event emitter.

What is the use of event target value?

target gives you the element that triggered the event. So, event. target. value retrieves the value of that element (an input field, in your example).


1 Answers

I think what you need is to use the event.currentTarget. This will contain the element that actually has the event listener. So if the whole <section> has the eventlistener event.target will be the clicked element, the <section> will be in event.currentTarget.

Otherwise parentNode might be what you're looking for.

link to currentTarget
link to parentNode

like image 147
donnywals Avatar answered Oct 07 '22 10:10

donnywals