Tengo un código de ejemplo de lo que estoy tratando de hacer: cuando haces clic en uno de los tamaños, es decir, el li, muestra el tamaño y el precio de ese artículo en un nuevo div llamado precio.
Lo que sucede actualmente es que no importa qué li elija, se muestra el primer tamaño y precio y se agrega un nuevo div. Donde lo que quiero es que se muestre cualquier li en el que se haga clic y que el contenido interno del div se reemplace cada vez. Cualquier ayuda sobre dónde me estoy equivocando sería apreciada.
var sizeSelector = document.querySelectorAll('.container li'); sizeSelector.forEach(function(el) { el.addEventListener('click', function() { runFunction(); }); }); function runFunction() { var newPrice = document.querySelector('.container li').innerHTML; document.querySelector('.container').insertAdjacentHTML("afterend", "<div class='price'>" + newPrice + "</div>"); console.log(newPrice); } <ul class='container'> <li>Size Small $20</li> <li>Size Medium $30</li> <li> Size large $40</li> </ul>El código que usó solo necesitaba un pequeño ajuste en runFunction y para que el div que contiene la class de precio se incluyera en la plantilla HTML original. Al hacer eso, podemos apuntar a ese div y actualizar su contenido solo.
var sizeSelector = document.querySelectorAll('.container li'); sizeSelector.forEach(function(el) { el.addEventListener('click', function(evt) { runFunction(evt); }); }); function runFunction(evt) { const newPrice = document.querySelector('.container li').innerHTML; const priceDiv = document.querySelector('.price'); priceDiv.innerHTML = evt.target.innerHTML; console.log(priceDiv.innerHTML); } <ul class='container'> <li>Size Small $20</li> <li>Size Medium $30</li> <li>Size large $40</li> </ul> <div class='price'></div>