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>