es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Mostrar diferente contenido en cada clic usando JS

14 Jun, 2023 Programación

Tengo un ejemplo de código de lo que estoy intentando hacer – en el que al hacer clic en uno de los tamaños, es decir, el li, mostraría el tamaño y precio de ese artículo en un nuevo div llamado price.

Lo que sucede actualmente es que sin importar cuál li elija, se muestra el primer tamaño y precio y sigue agregando un nuevo div. Lo que quiero es que se muestre el li que se hace 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>Tamaño pequeño $20</li>
  <li>Tamaño mediano $30</li>
  <li>Tamaño grande $40</li>
</ul>
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Problema al mostrar tamaño y precio al hacer clic

    El problema al mostrar el tamaño y precio del elemento seleccionado al hacer clic es que la función runFunction() siempre selecciona el primer elemento <li> en lugar del elemento clickeado. Además, cada vez que se hace clic en un nuevo elemento, se agrega un nuevo div en lugar de reemplazar el contenido del div existente.

    Solución

    Para solucionar esto, necesitamos hacer los siguientes cambios en el código:

    • En la función runFunction(), necesitamos obtener el innerHTML del elemento clickeado en lugar del primer elemento <li>.
    • En lugar de agregar un nuevo div cada vez, necesitamos obtener una referencia del div price existente y actualizar su contenido con el tamaño y precio seleccionado.

    Aquí está el código modificado:

    var sizeSelector = document.querySelectorAll('.container li');
var priceDiv = document.querySelector('.price');

sizeSelector.forEach(function(el) {
  el.addEventListener('click', function() {
    runFunction(el);
  });
});

function runFunction(el) {
  var newPrice = el.innerHTML;
  priceDiv.innerHTML = newPrice;
  console.log(newPrice);
}

    En este código, hemos agregado una referencia al div price usando document.querySelector('.price'). Luego, en la función runFunction(), hemos pasado el elemento clickeado como argumento y lo hemos utilizado para actualizar el contenido del div price utilizando priceDiv.innerHTML = newPrice.

    Esto debería solucionar el problema y mostrar el tamaño y precio seleccionados en el div price.

Comments are closed.