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
This question is related to
javascript
html
handleEvent(e) {
const parent = e.currentTarget.parentNode;
}
$(document).on("click", function(event){
var a = $(event.target).parents();
var flaghide = true;
a.each(function(index, val){
if(val == $(container)[0]){
flaghide = false;
}
});
if(flaghide == true){
//required code
}
})
To use the parent of an element use parentElement
:
function selectedProduct(event){
var target = event.target;
var parent = target.parentElement;//parent of "target"
}
function getParent(event)
{
return event.target.parentNode;
}
Examples: 1.
document.body.addEventListener("click", getParent, false);
returns the parent element of the current element that you have clicked.
- If you want to use inside any function then pass your event and call the function like this :
function yourFunction(event){ var parentElement = getParent(event); }
var _RemoveBtn = document.getElementsByClassName("remove");
for(var i=0 ; i<_RemoveBtn.length ; i++){
_RemoveBtn[i].addEventListener('click',sample,false);
}
function sample(event){
console.log(event.currentTarget.parentNode);
}
Source: Stackoverflow.com