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>