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.`;
}