<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container ">
<h2>Formulario reclamaciones</h2>
<form>
<label for="nombre">Producto:</label>
<input type="text" class="form-control" placeholder="Introduzca el nombre" name="nombre" id="nombre">
<label for="cantidad">Cantidad:</label>
<input type="number" class="form-control" placeholder="Introduzca cantidad" id="cantidad" name="cantidad"
value="1">
<label for="precio">Precio:</label>
<input type="number" class="form-control" placeholder="Introduzca el precio" id="precio" name="precio">
<p>
<label class="form-check-label">
<input type="checkbox" id="iva" name="iva" class="form-check-input" value="cliente">¿Tiene
IVA?
</label>
</p>
<h3>Importe total: <span id="total"></span></h3>
<button type="button" onclick="calcular()" class="btn btn-primary">Enviar</button>
<script src="js/test.js"></script>
</form>
</div>
</body>
</html>
function calcular () {
const producto = document.getElementById('nombre').value
console.log(producto)
const cantidad = parseFloat(document.getElementById('cantidad').value)
console.log(cantidad)
const precio = parseFloat(document.getElementById('precio').value)
console.log(precio)
const iva = document.getElementById('iva').checked
console.log(iva)
// Yo he comprobado que no tengo ningún error
let total = cantidad * precio
console.log(total)
if (iva) {
total = total + total * 0.21 // total*=1.21
}
console.log(total)
// Sé perfectamente que me funciona el cálculo del total
document.getElementById('total').innerHTML = total
}
