Getting value of different selections in Javascript-CodePudding

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>

CodePudding user response：

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>