I've got an example of the code of what i'm trying to work on below, with the exception that the price for each size would output something different. Small would be €20, Medium: €30, Large: €40 for example.
What i'm trying to do is to get the price each time a different size is selected on the page. I'm using MutationObserver to observe the price change that is made. But when i console.log this or try to add it into a new class newPrice in my original code i only get the first size of price i.e €20 and i've no idea how to get around this. Any help or guidance in how i could solve this would be appreciated.
var targetNode = document.querySelector('.productDetails');
var price = document.querySelector('.productPrice');
var config = { childList: true };
var callback = function(mutationsList, observer) {
for(var mutation of mutationsList) {
if (mutation.type == 'childList') {
console.log(price.innerHTML);
}
}
};
var observer = new MutationObserver(callback);
observer.observe(targetNode, config);
var clickSize = document.querySelectorAll('.sizeContainer li');
clickSize.forEach( function (el) {
el.addEventListener('click',function() {
var node = document.querySelector('.newPrice').insertAdjacentHTML("afterbegin", " " + price.innerHTML +" ");
});
});<div class="productDetails">
<ul class="sizeContainer">
<li>Small</li>
<li>Medium</li>
<li>Large</li>
</ul>
<p class="productPrice"> Price of the product would be output here</p>
<p class="newPrice"></p>
</div>I've managed to get this working using .textContent instead of using innerHTML to target the value i want to get, alongside some other adjustments. Leaving my answer here as it may/may not be useful for others.
var targetNode = document.querySelector('.productDetails .productPrice');
var config = {
characterData: false,
attributes: false,
childList: true,
subtree: false
};
var callback = function(mutationsList, observer) {
for (var mutation of mutationsList) {
if (mutation.type == 'childList') {
window.console.log(targetNode.textContent);
}
}
};
var observer = new MutationObserver(callback);
observer.observe(targetNode, config);
var clickSize = document.querySelectorAll('.sizeContainer li');
clickSize.forEach( function (el) {
el.addEventListener('click',function() {
var node = document.querySelector('.newPrice');
node.innerHTML = "" + targetNode.textContent +"";
});
});<div class="productDetails">
<ul class="sizeContainer">
<li>Small</li>
<li>Medium</li>
<li>Large</li>
</ul>
<p class="productPrice"> Price of the product would be output here</p>
<p class="newPrice"></p>
</div>