1

En este código de Javascript y jQuery existen las funciones para poder hacer que cada vez que el usuario oprima el botón agregar se cargue el producto mediante un select y aparezca una fila con el detalle de productos y debajo un total al cual se le va sumando el importe del subtotal de cada fila. Por otro lado, hay otra función para eliminar cada fila si el usuario lo desea. El problema es que no carga y/o agrega los productos y e algún momento, que lo pude hacer, al borrar dicha fila el total no se actualiza dinámicamente, es decir, no resta la fila eliminada, pero no logro entender el por qué de esto...

let cantidad = "";

let precio ="";

let subtotal="";

let tipoProducto="";

let total="";


function calcularPrecio() {

  tipoProducto = document.getElementById("producto").value;

  cantidad = document.getElementById("cantidad").value;
  
  switch (tipoProducto) {
    case "Manteca Light":
      if (cantidad < 6) {
        precio = 330;
      } else if (cantidad >= 6 && cantidad <= 11) {
        precio = 243;
      } else if (cantidad > 11 && cantidad <= 24) {
        precio = 225;
      } else {
        precio = 216;
      }
      break;
    case "Jabon Desengrasante":
      if (cantidad < 6) {
        precio = 251;
      } else if (cantidad >= 6 && cantidad <= 11) {
        precio = 179;
      } else if (cantidad > 11 && cantidad <= 24) {
        precio = 172;
      } else {
        precio = 165;
      }
      break;
    default:
      precio = "No se pudo calcular el precio";
  }
}

function calcularSubtotal() {
  
  subtotal = Number(cantidad*precio);
  return subtotal;
}

function calcularTotal() {

  total = productos.reduce(
    (counter, item) => counter + item.cantidad * item.precio,
    0
  );
}

//Función con metodos jQuery

function agregarFilaTotal () {

$('#total').text(`El presupuesto total es de: $ ${total}`);
$('#total').addClass('total');
}

//

function agregarFilaProducto () {

  document.querySelector("#productosSeleccionados").innerHTML +=`
  <div class="producto">
    <span id="nombreProducto">
    Producto: ${tipoProducto}
    </span>
    <span id="cantidadProducto">
    Cantidad: ${cantidad}
    </span>
    <span id="precioProducto">
    Precio: $ ${precio}
    </span>
    <span name="subtotal">
    Subtotal:$ ${subtotal}
    </span>
    <button class="eliminar">
    X
    </button>
  </div>
  `;
}

const productos = [];

function construirObjeto() {

  class Producto {
    constructor(tipoProducto, cantidad, precio,subtotal) {
      this.nombre = tipoProducto;
      this.cantidad = cantidad;
      this.precio = precio;
      this.subtotal = subtotal;
    }
  }
productos.push(new Producto(tipoProducto, cantidad, precio,subtotal));
}


//Almacenamiento en local storage

function guardarObjeto() {
let objetoJSON =  JSON.stringify(productos); 
localStorage.setItem("Datos productos",objetoJSON);
}

let botonAgregar = document.getElementById("agregar");

function agregarProducto() {

  calcularPrecio();
  calcularSubtotal();
  construirObjeto();
  calcularTotal();
  guardarObjeto();
  agregarFilaProducto();
  agregarFilaTotal();
  borrarFila();
}

botonAgregar.addEventListener("click", agregarProducto);


function borrarFila() {

  let filasCreadas = document.querySelectorAll(".eliminar");
    for (let i = 0; i< filasCreadas.length; i++) {
      filasCreadas[i].onclick = function () {
            this.parentNode.remove();
        }
    }
    
}



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simulador Compras</title>

    <!--Google Fonts-->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">

    <!--CSS-->
    <link rel="stylesheet" href="/CSS/styles.css">

    <!--Font Awesome-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">

</head>

<body>
    <div class="container">
        <div id="nuevoProducto">
            <label for="producto">Producto</label>
            <select id="producto">
                <option selected disabled>Seleccione un producto</option>
                <option value="Manteca Light">Manteca Light</option>
                <option value="Jabon Desengrasante">Jabon Desengrasante</option>
            </select>

            <label for="cantidad">Cantidad</label>
            <input id="cantidad" type="number" placeholder="Ingrese la cantidad">
            <button id="agregar">Agregar</button>
        </div>

        <div id="productosSeleccionados">
        </div>
        <div id="total">
        </div>
    

    </div>
        
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="/JS/main.js"></script>

</body>
</html>

1 respuesta 1

1

El problema es que simplemente eliminas la fila, sin borrar el producto del arreglo ni recalcular/mostrar el total. Pasos a seguir:

  1. Eliminar producto del arreglo con splice(), como estás recorriendo en un ciclo, en teoría, la variable i se va a mantener y puedes usarla como inicio
  2. Eliminar elemento HTML, eso ya lo tienes
  3. Llamar las funciones para recalcular y mostrar total

let cantidad = "";
let precio ="";
let subtotal="";
let tipoProducto="";
let total="";


function calcularPrecio() {
  tipoProducto = document.getElementById("producto").value;
  cantidad = document.getElementById("cantidad").value;
  switch (tipoProducto) {
    case "Manteca Light":
      if (cantidad < 6) {
        precio = 330;
      } else if (cantidad >= 6 && cantidad <= 11) {
        precio = 243;
      } else if (cantidad > 11 && cantidad <= 24) {
        precio = 225;
      } else {
        precio = 216;
      }
      break;
    case "Jabon Desengrasante":
      if (cantidad < 6) {
        precio = 251;
      } else if (cantidad >= 6 && cantidad <= 11) {
        precio = 179;
      } else if (cantidad > 11 && cantidad <= 24) {
        precio = 172;
      } else {
        precio = 165;
      }
      break;
    default:
      precio = "No se pudo calcular el precio";
  }
}

function calcularSubtotal() {
  subtotal = Number(cantidad*precio);
  return subtotal;
}

function calcularTotal() {
  total = productos.reduce(
    (counter, item) => counter + item.cantidad * item.precio,
    0
  );
}

//Función con metodos jQuery

function agregarFilaTotal () {
    $('#total').text(`El presupuesto total es de: $ ${total}`);
    $('#total').addClass('total');
}

//

function agregarFilaProducto () {
  document.querySelector("#productosSeleccionados").innerHTML +=`
  <div class="producto">
    <span id="nombreProducto">
    Producto: ${tipoProducto}
    </span>
    <span id="cantidadProducto">
    Cantidad: ${cantidad}
    </span>
    <span id="precioProducto">
    Precio: $ ${precio}
    </span>
    <span name="subtotal">
    Subtotal:$ ${subtotal}
    </span>
    <button class="eliminar">
    X
    </button>
  </div>
  `;
}

const productos = [];

function construirObjeto() {
  class Producto {
    constructor(tipoProducto, cantidad, precio,subtotal) {
      this.nombre = tipoProducto;
      this.cantidad = cantidad;
      this.precio = precio;
      this.subtotal = subtotal;
    }
  }
  productos.push(new Producto(tipoProducto, cantidad, precio,subtotal));
}


//Almacenamiento en local storage

function guardarObjeto() {
    // let objetoJSON =  JSON.stringify(productos); 
    // localStorage.setItem("Datos productos",objetoJSON);
}

let botonAgregar = document.getElementById("agregar");

function agregarProducto() {
  calcularPrecio();
  calcularSubtotal();
  construirObjeto();
  calcularTotal();
  guardarObjeto();
  agregarFilaProducto();
  agregarFilaTotal();
  borrarFila();
}

botonAgregar.addEventListener("click", agregarProducto);


function borrarFila() {
  let filasCreadas = document.querySelectorAll(".eliminar");
    for (let i = 0; i< filasCreadas.length; i++) {
      filasCreadas[i].onclick = function () {
            // Eliminar de lista
            productos.splice(i, 1);
            // Eliminar fila
            this.parentNode.remove();
            // Calcular total
            calcularTotal();
            agregarFilaTotal();
        }
    }
    
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simulador Compras</title>

    <!--Google Fonts-->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">

    <!--CSS-->
    <link rel="stylesheet" href="/CSS/styles.css">

    <!--Font Awesome-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">

</head>

<body>
    <div class="container">
        <div id="nuevoProducto">
            <label for="producto">Producto</label>
            <select id="producto">
                <option selected disabled>Seleccione un producto</option>
                <option value="Manteca Light">Manteca Light</option>
                <option value="Jabon Desengrasante">Jabon Desengrasante</option>
            </select>

            <label for="cantidad">Cantidad</label>
            <input id="cantidad" type="number" placeholder="Ingrese la cantidad">
            <button id="agregar">Agregar</button>
        </div>

        <div id="productosSeleccionados">
        </div>
        <div id="total">
        </div>
    

    </div>
        
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="/JS/main.js"></script>

</body>
</html>

Nota: Desactivé el uso de localStorage para poder probar aquí.

En mi humilde opinión, hay cosas por mejorar, por ejemplo:

  • Principalmente, no mezclar Javascript puro con jQuery y puede resultar confuso, complicando el mantenimiento del script
  • La asignación de eventos puede hacerse de otra forma, por lo general, no se recomienda el uso de onclick, ciertamente funciona, pero tiene limitantes
  • Yo pondría la clase fuera de la función y enviaría todos los datos como parámetros, evitando el uso de variables globales que, dependiendo del caso, podrían cambiar en algún momento y generar comportamientos inesperados
  • Buscar la forma de crear un arreglo de productos con nombre y rangos de precios, para evitar "harcodearlos" y, además, permite agregar más productos sin tener que modificar el código

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.