I've got a list of products and what i want to do is to make the price of the product clickable just like the product title linking to the same product URL.
I've created a for loop to try and do this, but the issue i have is each href link for each product is being created per product where i only need the one price with the corresponding href link. How do i correct this?
Note: I don't have access to change the original html which is why i'm trying to make these changes in javascript
var getAllLinks = document.querySelectorAll('.productTitle').forEach(function(el){
var createNewLinks = document.querySelectorAll('.productPrice').forEach(function (elem){
elem.insertAdjacentHTML("afterend", "<a href=" + el.getAttribute('href') + ">"+ elem.innerText +"</a>");
})
});
.container {padding-bottom: 20px;}
<article class="container" data-ga-product="04245">
<div class="productContent">
<a class="productTitle" href="#product1">Product 1</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€ 5,90</span>
</div>
</div>
</div>
</article>
<article class="container" data-ga-product="05395">
<div class="productContent">
<a class="productTitle" href="#product2">Product 2</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€ 145,90</span>
</div>
</div>
</div>
</article>
<article class="container" data-ga-product="263743">
<div class="productContent">
<a class="productTitle" href="#product3">Product 3</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€ 35,90</span>
</div>
</div>
</div>
</article>
<article class="container" data-ga-product="60493">
<div class="productContent">
<a class="productTitle" href="#product4">Product 4</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€ 125,90</span>
</div>
</div>
</div>
</article>
I'm not quite sure about your problem but I think maybe this is what you want.
Please let me know if I got it wrong :)
var getLink = document.querySelectorAll('.productTitle');
var newLink = document.querySelectorAll('.productPrice');
getLink.forEach((link, i) => {
newLink[i].insertAdjacentHTML("afterend", "<a href=" + link.getAttribute('href') + ">" + newLink[i].innerText + "</a>");
newLink[i].remove();
});
.container {padding-bottom: 20px;}
<article class="container" data-ga-product="04245">
<div class="productContent">
<a class="productTitle" href="#product1">Product 1</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€ 5,90</span>
</div>
</div>
</div>
</article>
<article class="container" data-ga-product="05395">
<div class="productContent">
<a class="productTitle" href="#product2">Product 2</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€ 145,90</span>
</div>
</div>
</div>
</article>
<article class="container" data-ga-product="263743">
<div class="productContent">
<a class="productTitle" href="#product3">Product 3</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€ 35,90</span>
</div>
</div>
</div>
</article>
<article class="container" data-ga-product="60493">
<div class="productContent">
<a class="productTitle" href="#product4">Product 4</a>
<div class="productPriceContainer">
<div class="productPrimary">
<span class="productPrice">€ 125,90</span>
</div>
</div>
</div>
</article>