2

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>

2 respuestas 2

5

Encuentro básicamente dos problemas

  1. El .value está sobre la cadena 'formProducto' en vez de el elemento en si (lo que devuelve el querySelector).

  2. El código se está ejecutando al cargar la página, eso significa que lo que carga en nombre y en cantidad son los valores por defecto y nunca más se vuelve a ejecutar, entonces cuando ejecutas el "agregar" el valor de nombre y cantidad son los iniciales, para solucionar eso, lo he metido dentro del método agregarProducto de esa forma se recalculan cada vez que se clickea el botón.

function agregarProducto() {
    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;
    

    

    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>
    `;
}
    
        let botonAgregar = document.getElementById('agregar');
    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>

0

El problema es cómo estás recogiendo los datos, estas usando

let nombre = document.querySelector('formProducto'.value);
let cantidad = parseInt(document.querySelector('cantidad'.value));

Lo cual tiene una mala sintaxis, de hecho yo usaría getElementById para quitarle peso de procesamiento al DOM

const nombre   = document.getElementById('formProducto').value;
const cantidad = Number( document.getElementById('cantidad').value );

Para evitar errores, primero sentenciaría la cantidad, no tiene caso procesarla si se recogió de una forma incorrecta

if( cantidad ) {
   swtich( nombre ) {
     ...
   }
}

Eso debería bastar

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.