<!DOCTYPE html>
<html lang=“es”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Rentabilidad del Producto</title>
</head>
<body>
<h2>Calcular Rentabilidad del Producto</h2>
<p>Precio del producto: $<span id="precio">1000</span></p>
<!-- Botón para agregar rentabilidad -->
<button id="calcular-btn">Agregar 20% de Rentabilidad</button>
<!-- Aquí se mostrará el nuevo precio -->
<p>Nuevo precio con rentabilidad: $<span id="resultado"></span></p>
<script>
// Asignamos el precio base del producto
const precioProducto = 1000;
// Seleccionamos el botón y el span donde mostraremos el resultado
const btnCalcular = document.getElementById("calcular-btn");
const resultadoSpan = document.getElementById("resultado");
// Agregamos un evento al botón
btnCalcular.addEventListener("click", function() {
// Calculamos el nuevo precio con el 20% de rentabilidad
const rentabilidad = precioProducto * 0.20;
const nuevoPrecio = precioProducto + rentabilidad;
// Mostramos el nuevo precio en el HTML
resultadoSpan.textContent = nuevoPrecio.toFixed(2); // Mostrar con dos decimales
});
</script>
</body>
</html>