En este código se intenta simular la compra de productos para calcular su precio total. El problemas es que dentro del switch no está tomando los datos en la sentencia case, es decir, no encuentra ninguna coincidencia cuando debería hacerlo, arrojando NaN. Por este motivo no se logra determinar el precio de los productos y por consiguiente el subtotal.
let nombre = document.querySelector('formProducto'.value);
let cantidad = parseInt(document.querySelector('cantidad'.value));
let precio = "";
switch (nombre) {
case 'Producto1':
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 'Producto2':
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";
}
let subtotal = cantidad * precio;
let botonAgregar = document.getElementById('agregar');
function agregarProducto() {
document.querySelector('#productosSeleccionados').innerHTML += `
<div class="producto">
<sp id="nombreProducto">
Producto: ${document.querySelector('#formProducto').value}
</sp
<span id="cantidadProducto">
Cantidad: ${document.querySelector('#cantidad').value}
</span>
<span id="precioProducto">
Precio: $ ${precio}
</span>
<span id="subtotal">
Subtotal: $ ${subtotal}
</span>
<button class="eliminar">
<i class="far fa-trash-alt"></i>
</button>
</div>
`;
}
botonAgregar.addEventListener('click', agregarProducto);
<!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>Cotizador Online</title>
<!--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">
<select id="formProducto" >
<option selected>Seleccione el producto</option>
<option value="Producto1">Cloro Renderlex</option>
<option value="Producto2">Lavaplatos Dessgras</option>
</select>
<input id="cantidad" type="text" placeholder="Ingrese la cantidad">
<button id="agregar">Agregar</button>
</div>
<div id="productosSeleccionados">
</div>
</div>
<script src="/JS/main.js"></script>
</body>
</html>