1

Estoy creando una función donde se calcule el valor de 1 producto por la cantidad de productos que necesite el "cliente", y muestre los colores que el cliente elija para su producto, se muestra un input de "Cantidad" y otro de "Color", en cantidad de autos se muestra la cantidad que eligió el cliente, en Precio Total se muestra la multiplicación del precio del producto X la cantidad escogida y en Color escogido muestra el color que escriba el cliente, hasta ahí me funciona bien.

Luego el objetivo es sumar el precio total de los resultados de cada uno en Valor Total que es donde me sale el error NaN, luego de varios intentos al sumar me sigue saliendo el error NaN.

Espero que se haya entendido y me puedan ayudar. 👍🏻

//Debemos calcular el precio total de varios productos indicando cantidad y color

//Precio de los autos
var precioMaserati = 57000000;
var precioMacklaren = 110000000;
var precioLamborghini = 118000000;

//Identificamos la cantidad de autos elegidos por marca de vehiculo
var cantidadInputMas = document.querySelector("input[class='input-maserati']");
var cantidadInputMack = document.querySelector("input[class='input-macklaren']");
var cantidadInputLambo = document.querySelector("input[class='input-lambo']");

//Identificamos el color de autos elegidos por marca de vehiculo
var colorInputMas = document.querySelector("input[class='input-color-1']");
var colorInputMack = document.querySelector("input[class='input-color-2']");
var colorInputLambo = document.querySelector("input[class='input-color-3']");

//Información de Maserati
var cantidadFinalMAs = document.querySelector(".total-de-maserati")
var precioFinalMAs = document.querySelector(".total-price-maserati")
var colorFinalMAs = document.querySelector(".color-car-1")

//Información de Macklaren
var cantidadFinalMack = document.querySelector(".total-de-macklaren")
var precioFinalMack = document.querySelector(".total-price-macklaren")
var colorFinalMack = document.querySelector(".color-car-2")

//Información de Lambo
var cantidadFinalLambo = document.querySelector(".total-de-lambo")
var precioFinalLambo = document.querySelector(".total-price-lambo")
var colorFinalLambo = document.querySelector(".color-car-3")

function calcularTotalMas() {
    var cantidadMaserati = cantidadInputMas.value
    var colormaserati = colorInputMas.value

    cantidadFinalMAs.innerHTML = cantidadMaserati;
    precioFinalMAs.innerHTML = (precioMaserati * cantidadMaserati).toLocaleString();
    colorFinalMAs.style.backgroundColor = colormaserati;
}

function calcularTotalMack() {
    var cantidadMacklaren = cantidadInputMack.value
    var colorMacklaren = colorInputMack.value

    cantidadFinalMack.innerHTML = cantidadMacklaren;
    precioFinalMack.innerHTML = (precioMacklaren * cantidadMacklaren).toLocaleString();
    colorFinalMack.style.backgroundColor = colorMacklaren;
}

function calcularTotalLambo() {
    var cantidadLambo = cantidadInputLambo.value
    var colorLambo = colorInputLambo.value

    cantidadFinalLambo.innerHTML = cantidadLambo;
    precioFinalLambo.innerHTML = (precioLamborghini * cantidadLambo).toLocaleString();
    colorFinalLambo.style.backgroundColor = colorLambo;
}

var precioTotal = document.querySelector(".price-cars");
//var cantidadTotal = document.querySelector(".mount-cars")

function calcularTotalAutos() {
    let calPrecioTotal = (precioFinalMAs = document.querySelector(".total-price-maserati")).value + (precioFinalMack = document.querySelector(".total-price-macklaren")).value + (precioFinalLambo = document.querySelector(".total-price-lambo")).value;

    precioTotal.innerHTML = calPrecioTotal;
}
.colors {
    display: flex;
    justify-content: start;
}

.colors div {
    margin-left: 10px;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 50%;
    border: solid 1px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Ejercicio JS 3</title>
</head>
<body>
    <section>
        <div class="card-section">
            <div class="card card-1">
                <h6>Maserati</h6>
                <div>
                    <input type="number" class="input-maserati" placeholder="Cantidad de autos">
                </div>
        
                <div>
                    <input type="text" class="input-color-1" placeholder="Color del auto">
                </div>
        
                <p>Precio: $57.000.000</p>
        
                <div class="card-boton">
                    <button onclick="calcularTotalMas()">Calcular Precio</button>
                </div>

                <p>Cantidad de Autos: <span class="total-de-maserati"></span></p>
                <p>Precio Total: $<span class="total-price-maserati"></span></p>
                <div class="colors">
                    <p>Color elegido:</p>
                    <div class="color-car-1"></div>
                </div>
            </div>

--------------o-----------------

            <div class="card card-2">
                <h6>Macklaren</h6>
                <div>
                    <input type="number" class="input-macklaren" placeholder="Cantidad de autos">
                </div>
        
                <div>
                    <input type="text" class="input-color-2" placeholder="Color del auto">
                </div>
        
                <p>Precio: $110.000.000</p>
        
                <div class="card-boton">
                    <button onclick="calcularTotalMack()">Calcular Precio</button>
                </div>

                <p>Cantidad de Autos: <span class="total-de-macklaren"></span></p>
                <p>Precio Total: $<span class="total-price-macklaren"></span></p>
                <div class="colors">
                    <p>Color elegido:</p>
                    <div class="color-car-2"></div>
                </div>
            </div>

--------------o-----------------

            <div class="card card-3">
                <h6>Lamborghini</h6>
                <div>
                    <input type="number" class="input-lambo" placeholder="Cantidad de autos">
                </div>
        
                <div>
                    <input type="text" class="input-color-3" placeholder="Color del auto">
                </div>
        
                <p>Precio: $118.000.000</p>
        
                <div class="card-boton">
                    <button onclick="calcularTotalLambo()">Calcular Precio</button>
                </div>

                <p>Cantidad de Autos: <span class="total-de-lambo"></span></p>
                <p>Precio Total: $<span class="total-price-lambo"></span></p>
                <div class="colors">
                    <p>Color elegido:</p>
                    <div class="color-car-3"></div>
                </div>
            </div>
        </div>

--------------o-----------------

        <div class="total-section">
            <p>Valor Total: $<span class="price-cars"></span></p>
            
            <div class="card-boton">
                <button onclick="calcularTotalAutos()">Calcular Valor Total</button>
            </div>
        </div>
    </section>

    <script src="script.js"></script>
</body>
</html>

1
  • En la función de valor total, aplicales un parseInt a los valores que vayas a sumar, algo asi como "parseInt(document.querySelector(".total-price-maserati")).value) + ..." Commented el 30 dic. 2022 a las 14:20

1 respuesta 1

1

Veo como sugieren el uso de parseInt, pero simplemente...

¿Por que no realizar bien el calculo dentro de la función y ya?

Tienes los precios, y las cantidades en los inputs ya.. solo realiza el calculo directo creo que seria mas simple.

function calcularTotalAutos() {
  var maserati = precioMaserati * cantidadInputMas.value;
  var mclaren = precioMacklaren * cantidadInputMack.value;
  var lambo = precioLamborghini * cantidadInputLambo.value;
  var calPrecioTotal = maserati + mclaren + lambo;
  precioTotal.innerHTML = calPrecioTotal.toLocaleString();
}

btw, es mclaren, sin la k :3

En el sgte ejemplo, es 1-maserati, 2-mclaren y 3-lambos introducir la descripción de la imagen aquí

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.