I have a couple of divs containing images, text and links. They are identified by the class .feed-item. Instead of only accessing the link behind by clicking on the link, I would like to make the whole div clickable.
I could solve this easily with a onclick at the level of the DIV but now that I'm using AMP, I'm not allowed to use onclick in DIVs anymore so I tried to find a solution with a listener.
Site is: https://www.laurentwillen.be Concerned class: .feed-item Source code:
<div class="feed-item page-1" data-page="1" >
<div class="feed-image"><amp-img class="amp_img" src="www.laurentwillen.be/pixel.gif" width="160px" height="50px" sizes="calc(20vw - )" srcset="https://www.laurentwillen.be/wp-content/uploads/sites/21/2019/01/avis-review-aliexpress-300x94.jpg 300w, https://www.laurentwillen.be/wp-content/uploads/sites/21/2019/01/avis-review-aliexpress-768x240.jpg 768w, https://www.laurentwillen.be/wp-content/uploads/sites/21/2019/01/avis-review-aliexpress-1024x319.jpg 1024w, https://www.laurentwillen.be/wp-content/uploads/sites/21/2019/01/avis-review-aliexpress-1400x437.jpg 1400w, https://www.laurentwillen.be/wp-content/uploads/sites/21/2019/01/avis-review-aliexpress-900x281.jpg 900w, https://www.laurentwillen.be/wp-content/uploads/sites/21/2019/01/avis-review-aliexpress-700x218.jpg 700w, https://www.laurentwillen.be/wp-content/uploads/sites/21/2019/01/avis-review-aliexpress-500x156.jpg 500w" alt="avis-review-aliexpress"></amp-img></div><div class="feed-category">Expérience d'achat</div>
<div class="feed-text">
<div class="feed-title">Mon avis complet sur Aliexpress.com</div>
<div class="feed-link"><a href="https://www.laurentwillen.be/experience-dachat/mon-avis-complet-sur-aliexpress-com/">Mon avis complet sur Aliexpress.com</a></div>
<div class="feed-description">J'ai acheté plus de 90 produits sur Aliexpress et je partage mes bonnes et mauvaises expériences pour vous aider à choisir.</div>
</div>
My code:
feed_item = document.getElementsByClassName('feed-item');
for (a=0;a<feed_item.length;a++)
{
feed_item[a].addEventListener("click", function(e){
console.log(e.target.innerHTML);
parser = new DOMParser();
var local_html = parser.parseFromString(e.target.innerHTML, "text/html");
link = local_html.querySelectorAll('div.feed-link a');
console.log(link[0]);
//document.location = link[0];
});
}
If I click on the DIV border, I get the full HTML inside the div and I can parse it to retrieve the link. If I click anywhere inside the DIV (ex: on the description text), I only get the HTML for this specific area where the link is not available. I'd like to get all the html inside .feed-item instead of some child DIVs.
Do you have any idea of how I could achieve this? It has to be vanilla JS.
I have tried something like this.
var elements = document.getElementsByClassName("feed-item");
var myFunction = function() {
let link = this.querySelector('.feed-link a').getAttribute("href");
window.location.href = link;
};
for (var i = 0; i < elements.length; i++) {
elements[i].addEventListener('click', myFunction, false);
}