Tengo un ejemplo del código en el que estoy tratando de trabajar a continuación, con la excepción de que el precio de cada tamaño generaría algo diferente. Pequeño sería 20€, Mediano: 30€, Grande: 40€ por ejemplo.
Lo que estoy tratando de hacer es obtener el precio cada vez que se selecciona un tamaño diferente en la página. Estoy usando MutationObserver para observar el cambio de precio que se hace. Pero cuando consola.Registro esto o intento agregarlo a una nueva clase newPrice en mi código original, solo obtengo el primer tamaño del precio, es decir, 20 € y no tengo idea de cómo evitarlo. Cualquier ayuda u orientación sobre cómo podría resolver esto sería apreciada.
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>Me las arreglé para hacer que esto funcione usando .textContent en lugar de usar innerHTML para apuntar al valor que quiero obtener, junto con algunos otros ajustes. Dejo mi respuesta aquí, ya que puede o no ser útil para otros.
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>