0

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();
}

1 respuesta 1

1

De entrada te digo sin tener mucha experiencia que el manejo de objetos que estas haciendo no es el adecuado.

No puedes hacer que una clase dependa de una instancia de otra clase, pero bueno te voy a dejar una ayuda que quizas te pueda servir.

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];
        console.log({ 'this.arregloCompras': this.arregloCompras })
        console.log({ 'this.arregloPreciosIniciales': this.arregloPreciosIniciales })
        console.log({ 'this.arregloPreciosCantidad': this.arregloPreciosCantidad })
        ui.recorrerArregloCompras(this.arregloCompras, this.arregloPreciosCantidad)
    }

    guardarPreciosIniciales(precioInput) {
        this.arregloPreciosIniciales.push(precioInput);
        this.arregloPreciosCantidad.push(precioInput * 1);
        administrarCompras.calcularTotal(this.arregloPreciosCantidad)
    }

    calcularTotal(arregloPreciosCantidad) {
        const total = arregloPreciosCantidad.reduce((total, precios) => total + precios, 0);
        ui.mostrarTotal(total)
    }

    cambiarPrecioCantidad(e) {
        const contenedorCentro = e.target.parentElement;

        console.log({
            contenedorCentro
        })

        const precioCompra = Number(contenedorCentro.querySelector('.hidden').value);
        const idCompra = Number(contenedorCentro.querySelector('.hiddenId').value);
        const cantidad = Number(contenedorCentro.querySelector('.ocultar').value);

        

        console.log({
            precioCompra,
            cantidad,
            idCompra
        })
        const cantidadCompra = Number(e.target.value);

        const totalCantidad = precioCompra * cantidadCompra;

        this.arregloPreciosCantidad[this.arregloCompras.findIndex(compra => compra.id === idCompra)] = totalCantidad

        contenedorCentro.querySelector('.precioPorCantidad strong').textContent = totalCantidad;

        this.cambiarCantidad(totalCantidad);

    }

    cambiarCantidad(totalCantidad) {
        console.log({'this.arregloPreciosCantidad - ANTES': this.arregloPreciosCantidad})
        // this.arregloPreciosCantidad = [...this.arregloPreciosCantidad, totalCantidad];
        console.log({'this.arregloPreciosCantidad - DESPUES': this.arregloPreciosCantidad})
        this.calcularTotal(this.arregloPreciosCantidad)
    }
}

class UI {
    recorrerArregloCompras(arregloCompras, arregloPreciosCantidad) {

        while (resultados.firstChild) {
            resultados.removeChild(resultados.firstChild)
        }

        arregloCompras.forEach((compra, indice) => {
            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', 'precioPorCantidad');
            precioParrafo.innerHTML = `$ <strong>${arregloPreciosCantidad[ indice ]}</strong>`;

            const precioUnidad = document.createElement('p');
            precioUnidad.classList.add('mx-3', 'm-0', 'precio');
            precioUnidad.innerHTML = `$ <span>${ precioInput}</span>`;

            const inputCantidad = document.createElement('input');
            inputCantidad.classList.add('ocultar')
            inputCantidad.type = 'number';
            inputCantidad.min = 1;
            inputCantidad.value = arregloPreciosCantidad[ indice ] / precioInput;
            inputCantidad.oninput = (e) => {
                administrarCompras.cambiarPrecioCantidad(e);
            }
            const inputHidden = document.createElement('input');
            inputHidden.classList.add('hidden')
            inputHidden.type = 'hidden';
            inputHidden.value = precioInput;
            const idHidden = document.createElement('input');
            idHidden.classList.add('hiddenId')
            idHidden.type = 'hidden';
            idHidden.value = id;
            divCentro.appendChild(compraParrafo);
            divCentro.appendChild(precioUnidad);
            divCentro.appendChild(inputCantidad);
            divCentro.appendChild(precioParrafo);
            divCentro.appendChild(inputHidden);
            divCentro.appendChild(idHidden);

            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.guardarPreciosIniciales(precioInput)

    administrarCompras.agregarArregloCompras(comprasObj)


    console.log({ administrarCompras })

    formulario.reset();
}
<head>
    <!-- <link rel="stylesheet" href="css/bootstrap.min.css"> -->
    <!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</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>

Espero te sirva, me acomodé a tu codigo, solo para que te guies, pero deberías replantear toda tu solucion porque se te va a volver un complique

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.