1

hice pruebas con este codigo creandolo como funcion y agregandolo a un envetListener tomando los datos de un input, pero no logre hacerlo funcionar.

Asi como expongo el codigo funciona bien. Mi problema esta a la hora de aplicarlo en un eventListener lograr que funcione.

Espero se entienda mi consulta. Gracias

html:

<!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">
    <link rel="stylesheet" href="styles.css">
    <title>Descuentos</title>
</head>
<body>

    <h1>descuentos en tu compra
    </h1>
    <ul>
        <li>comprando mas de 100 pesos tenes un 5% de descuento</li>
        <li>comprando mas de 500 pesos tenes un 15% de descuento</li>
        <li>comprando mas de 1500 pesos tenes un 30% de descuento</li>
    </ul>


    <p id="respuesta"></p>
    <script src="app.js"></script>
</body>
</html>

javascript:


const respuesta = document.getElementById('respuesta');
let descuento;
let compra;

compra = 1560; // dependiendo de este valor va a variar la respuesta

if (compra > 100 && compra <= 500 ) {
        descuento = compra - ( compra * 0.05 );
        respuesta.style.display = "block";
        respuesta.innerText = `Hiciste una compra de $${compra}. Tenes un descuento del 5% y el total es $${descuento}`;
    } else if ( compra > 500 && compra <= 1500 ) {
        descuento = compra - ( compra * 0.15 );
        respuesta.style.display = "block";
        respuesta.innerText = `Hiciste una compra de $${compra}. Tenes un descuento del 15% y el total es $${descuento}`;
    } else if ( compra > 1500 ) {
        descuento = compra - ( compra * 0.3 );
        respuesta.style.display = "block";
        respuesta.innerText = `Hiciste una compra de $${compra}. Tenes un descuento del 30% y el total es $${descuento}`;
    } else {
        respuesta.style.display = "block";
        respuesta.innerText = `Comprasete $${compra}. No tenes ningun descuento que aplicar.`;
    }


1 respuesta 1

1

Hola para el siguiente código utilicé jquery.
Si no quieres utilizar jquery te dejaré comentado la parte del código sin jquery.

Agregué un input donde guardo el valor de la compra y un button al que le añado el listener.

$("#compra").on('click',compra);
//document.getElementById('compra').addEventListener("click",compra);

//Creo la función compra y dentro coloco tu código
function compra(){

    const respuesta = document.getElementById('respuesta');
    let descuento;
    let compra;
    /** se obtiene el valor del input agregado, si lo creas de tipo
    * texto tendrás que validar que lo que tenga como valor sea una 
    * serie de números y castearlo como un valor numérico
    */
    compra = $('#pesos').val();
    //compra = document.getElementById('pesos').value;

    if (compra > 100 && compra <= 500 ) {
        descuento = compra - ( compra * 0.05 );
        respuesta.style.display = "block";
        respuesta.innerText = `Hiciste una compra de $${compra}. Tenes un descuento del 5% y el total es $${descuento}`;
    } else if ( compra > 500 && compra <= 1500 ) {
        descuento = compra - ( compra * 0.15 );
        respuesta.style.display = "block";
        respuesta.innerText = `Hiciste una compra de $${compra}. Tenes un descuento del 15% y el total es $${descuento}`;
    } else if ( compra > 1500 ) {
        descuento = compra - ( compra * 0.3 );
        respuesta.style.display = "block";
        respuesta.innerText = `Hiciste una compra de $${compra}. Tenes un descuento del 30% y el total es $${descuento}`;
    } else {
        respuesta.style.display = "block";
        respuesta.innerText = `Comprasete $${compra}. No tenes ningun descuento que aplicar.`;
    }

}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!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>Descuentos</title>
</head>
<body>

    <h1>descuentos en tu compra
    </h1>
    <ul>
        <li>comprando mas de 100 pesos tenes un 5% de descuento</li>
        <li>comprando mas de 500 pesos tenes un 15% de descuento</li>
        <li>comprando mas de 1500 pesos tenes un 30% de descuento</li>
    </ul>
    <!--botón al que se le agrega el event listener-->
    <button id="compra" >compra</button>
    <!--agruegué un input donde se captura la venta-->
    <input id="pesos" type="number">
    <p id="respuesta"></p>
</body>
</html>

3
  • Que tal Alejandroo00, seria bueno dar contexto de tu respuesta, como solucionaste el problema, o que cambios tiene que hacer Juan para poder llegar a tu resultado. Esto ayudará muchísimo a cualquier persona que precise de replicar la pregunta y/o la respuesta. el 22 may. 2021 a las 22:26
  • 1
    @VíctorHugoTirado, creí haber dejado los comentarios, parece que solo quedó uno, gracias por la observación el 22 may. 2021 a las 22:28
  • Muchas gracias @alejandro00 !!! me sirvio!!! el 24 may. 2021 a las 12:48

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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