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.

Cómo calcular el precio total del carrito de compras utilizando LocalStorage.

04 Jun, 2023 Programación

Estoy tratando de calcular el precio total del carrito, pero no estoy seguro de cómo debería escribir el código. ¿Puede alguien ayudarme?

<script>
  document.querySelector("#updateCart").addEventListener('click',function()
  {
    document.querySelector('#prod<em>value').innerText = localStorage.getItem("prod</em>value")
    document.querySelector('#prod<em>qty').innerText = localStorage.getItem("prod</em>qty")
    document.querySelector('#prod<em>size').innerText = localStorage.getItem("prod</em>size")
  })
  document.querySelector("#updateCart").addEventListener('click',function()
  {
    document.querySelector('#prod2<em>value').innerText = localStorage.getItem("prod2</em>value")
    document.querySelector('#prod2<em>qty').innerText = localStorage.getItem("prod2</em>qty")
    document.querySelector('#prod2<em>size').innerText = localStorage.getItem("prod2</em>size")
  })
  document.querySelector("#updateCart").addEventListener('click',function()
  {
    document.querySelector('#total').innerText = localStorage.getItem('prod<em>value' + 'prod2</em>value')
  })
</script>

El #total que creé no estaba funcionando.

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para calcular el precio total del carrito, es necesario convertir los valores recuperados del almacenamiento local a números (usando Number() o parseInt()), sumarlos y luego establecer el resultado como texto del elemento #total. Aquí hay un fragmento de código actualizado para lograr esto:

    document.querySelector("#updateCart").addEventListener('click', function() {
  const prodValue = Number(localStorage.getItem("prod_value"));
  const prodQty = Number(localStorage.getItem("prod_qty"));
  const prodSize = localStorage.getItem("prod_size");
  document.querySelector("#prod_value").innerText = prodValue;
  document.querySelector("#prod_qty").innerText = prodQty;
  document.querySelector("#prod_size").innerText = prodSize;

  const prod2Value = Number(localStorage.getItem("prod2_value"));
  const prod2Qty = Number(localStorage.getItem("prod2_qty"));
  const prod2Size = localStorage.getItem("prod2_size");
  document.querySelector("#prod2_value").innerText = prod2Value;
  document.querySelector("#prod2_qty").innerText = prod2Qty;
  document.querySelector("#prod2_size").innerText = prod2Size;

  const total = prodValue + prod2Value;
  document.querySelector("#total").innerText = total;
});

    Esto debería establecer el precio total correcto en el elemento #total cuando se hace clic en el botón “Actualizar carrito”.

Comments are closed.