Tengo la siguiente pagina el cual es una lista de compras, se agrega lo que se va a comprar y el precio de cada articulo en inputs(compra, precio), despues se muestra en un div en forma de lista al agregar cada compra con su precio, al mostrarlo en la pagina con javascript le agrego un input checkbox, lo que se va a comprar, el precio, las cantidades de cada articulo a comprar en un input number iniciando en 1, y un icono para eliminar esa compra. Al cambiar la cantidad de cada articulo, el precio de cada articulo se multiplica por las cantidades a "comprar". Ya cambio el precio de cada compra respecto a cuantos artículos se van a comprar. Pero quiero que cada precio con las cantidades ya cambiadas se sumen o se resten al agregar mas cantidades o eliminar, para agregarlas al total de las compras. Intente guardar cada precio de cada articulo en un arreglo, pero al cambiar la cantidad de articulos a comprar, el nuevo precio se agrega otra vez, haciendo que si solo tengo 3 objetos a comprar, se agregan esos 3 precios al arreglo, pero al momento de cambiar la cantidad de algun articulo, el nuevo precio se agrega nuevamente, como puedo agregar el precio del articulo, pero actualizando el ya existente, sin agregar otra cantidad al arreglo.
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body>
<header>
<h1 class="text-center my-4 text-white">Supermarker List</h1>
<div class="container">
<div class="row bg-white m-1 py-3 rounded">
<div class="col-12">
<form id="formulario">
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label m-0 fw-bold">Compra:</label>
<input type="text" class="form-control compra" id="compra" aria-describedby="emailHelp">
</div>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label m-0 fw-bold">Precio:</label>
<input type="number" class="form-control precio" id="precio" aria-describedby="emailHelp">
</div>
<button type="submit" class="btn btn-primary" id="agregar-compra">Agregar Compra</button>
</form>
</div>
<div class="col-12 mt-5">
<h2 class="text-center text-dark">Compras por realizar</h2>
<div id="lista-compras"></div>
<div id="total-pagar"></div>
</div>
</div>
</div>
</header>
<script src="https://kit.fontawesome.com/1b662a6313.js"></script>
<script src="js/app.js"></script>
</body>
const formulario = document.querySelector('#formulario');
const resultados = document.querySelector('#lista-compras');
const totalPagar = document.querySelector('#total-pagar')
window.addEventListener('DOMContentLoaded', () => {
formulario.addEventListener('submit', validarFormulario);
})
class Compras{
constructor(){
this.arregloCompras = []
this.arregloPreciosIniciales = []
this.arregloPreciosCantidad = []
}
agregarArregloCompras(comprasObj){
this.arregloCompras = [...this.arregloCompras, comprasObj];
ui.recorrerArregloCompras(this.arregloCompras)
}
guardarPreciosIniciales(precioInput){
this.arregloPreciosIniciales.push(precioInput);
administrarCompras.calcularTotal(this.arregloPreciosIniciales)
}
calcularTotal(arregloPreciosIniciales){
const total = arregloPreciosIniciales.reduce((total,precios) => total + precios ,0);
ui.mostrarTotal(total)
}
cambiarPrecioCantidad(e){
const contenedorCentro = e.target.parentElement;
const precioCompra = Number(contenedorCentro.querySelector('.hidden').value);
const cantidadCompra = Number(e.target.value);
const totalCantidad = precioCompra * cantidadCompra;
contenedorCentro.querySelector('.precio span').textContent = totalCantidad;
administrarCompras.cambiarCantidad(totalCantidad);
}
cambiarCantidad(totalCantidad){
this.arregloPreciosCantidad = [...this.arregloPreciosCantidad,totalCantidad];
console.log(this.arregloPreciosCantidad)
}
}
class UI{
recorrerArregloCompras(arregloCompras){
while(resultados.firstChild){
resultados.removeChild(resultados.firstChild)
}
arregloCompras.forEach(compra => {
const {compraInput, precioInput, id} = compra;
const divContenedor = document.createElement('div');
divContenedor.classList.add('d-flex', 'justify-content-between', 'align-items-center', 'mt-3', 'contenedor');
const divIzquierda = document.createElement('div');
divIzquierda.classList.add('d-flex', 'align-items-center')
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
divIzquierda.appendChild(checkbox);
const divCentro = document.createElement('div');
divCentro.classList.add('d-flex', 'align-items-center','divCentro')
const compraParrafo = document.createElement('p');
compraParrafo.classList.add('m-0');
compraParrafo.textContent = compraInput;
const precioParrafo = document.createElement('p');
precioParrafo.classList.add('mx-3', 'm-0', 'precio');
precioParrafo.innerHTML = `$ <span>${precioInput}</span>`;
const inputCantidad = document.createElement('input');
inputCantidad.classList.add('ocultar')
inputCantidad.type = 'number';
inputCantidad.min = 1;
inputCantidad.value = 1;
inputCantidad.oninput = (e) => {
administrarCompras.cambiarPrecioCantidad(e);
}
const inputHidden = document.createElement('input');
inputHidden.classList.add('hidden')
inputHidden.type = 'hidden';
inputHidden.value = precioInput;
divCentro.appendChild(compraParrafo);
divCentro.appendChild(precioParrafo);
divCentro.appendChild(inputCantidad);
divCentro.appendChild(inputHidden);
const divDerecha = document.createElement('div');
const eliminar = document.createElement('a');
eliminar.href = "#"
const icono = document.createElement('i');
icono.classList.add('fas', 'fa-trash')
eliminar.appendChild(icono)
divDerecha.appendChild(eliminar);
divContenedor.appendChild(divIzquierda)
divContenedor.appendChild(divCentro)
divContenedor.appendChild(divDerecha)
resultados.appendChild(divContenedor)
})
}
mostrarTotal(total){
while(totalPagar.firstChild){
totalPagar.removeChild(totalPagar.firstChild)
}
const divTotal = document.createElement('div');
divTotal.innerHTML = `
<p class="alert alert-success p-0 p-2 mt-4">El total es: $ <span class="total-pagar">${total}</span></p>
`
totalPagar.appendChild(divTotal)
}
}
const administrarCompras = new Compras();
const ui = new UI();
function validarFormulario(e){
e.preventDefault();
let compraInput = document.querySelector('#compra').value;
let precioInput = Number(document.querySelector('#precio').value);
if(compraInput === '' || precioInput === 0){
mostrarAlertas('Ambos campos son obligatorios')
return;
}
const comprasObj = {
compraInput,
precioInput,
id: Date.now(),
}
administrarCompras.agregarArregloCompras(comprasObj)
administrarCompras.guardarPreciosIniciales(precioInput)
formulario.reset();
}