// alerta if (isNaN(n1)) { alert('Ingresa la capacidad'); return; }
var n5 = parseInt(document.dosificacion.dosificacion.value); var esencia = (n1 * n5/100).toFixed(); var n2 = parseInt(esencia); var n6 =("0.08"); var fijador = (n1*n6).toFixed(); var perfumol = (n1 - n2 - fijador).toFixed();
document.dosificacion.esencia.value = esencia + " g."; document.dosificacion.fijador.value = fijador + " g."; document.dosificacion.perfumol.value = perfumol + " g.";
}
Ingresa la Capacidad
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Gloria Perfumes®, perfumes y esencias">
<meta name="author" content="Grupo Gloria">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="images/favicon.ico">
</head><!--/head-->
<script>
function calcular() {
var n1 = parseInt(document.dosificacion.capacidad.value);
// alerta
if (isNaN(n1)) {
alert('Ingresa la capacidad');
return;
}
var n5 = parseInt(document.dosificacion.dosificacion.value);
var esencia = (n1 * n5/100).toFixed();
var n2 = parseInt(esencia);
var n6 =("0.08");
var fijador = (n1*n6).toFixed();
var perfumol = (n1 - n2 - fijador).toFixed();
document.dosificacion.esencia.value = esencia + " g.";
document.dosificacion.fijador.value = fijador + " g.";
document.dosificacion.perfumol.value = perfumol + " g.";
}
</script>
<body>
<section class="calculator">
<div class="container">
<div class="row">
<div class="col-sm-12">
</div>
</div>
<div class="container-calculator">
<div class="col-sm-12">
</div>
<div class="col-sm-6 aos-init aos-animate" data-aos="fade-right">
<div class="panel amounts hoverable">
<p>Ingresa la Capacidad</p>
</span>
<form name="dosificacion">
<input class="capacidad" name="capacidad" id="amount" autocomplete="off" type="text" placeholder="0" maxlength="4">
<div class="blink activated"></div>
<p>Concentración</p>
<div>
<select class="concentracion" name="dosificacion">
<option value=".08">50</option>
<option value=".07">45</option>
<option value=".04">40</option>
<option value=".04">38</option>
<option value=".03">33</option>
<option value=".02">25</option>
</select>
</div>
<div class="col-sm-6 aos-init aos-animate" <p>Concentración<data-aos="fade-left">
<div class="panel cobros hoverable">
<div class="row">
<div class="col-sm-7 col-xs-7">
<p>Esencia</p>
</div>
<div>
<select class="concentracion" name="dosificacion">
<input type="text" class="esencia" name="esencia"id="amount2"></b></p>
</div>
<div class="col-sm-7 col-xs-7">
<option value=".08">50< <p>Fijador</option>p>
</div>
<option value=".07">45</option> <div>
<input class="fijador" type="text" name="fijador"id="amount2"><br>
<option value=".04">40< </option>div>
<div class="col-sm-7 col-xs-7">
<option value=".04">38< <p>Perfumol</option>p>
</div>
<option value=".03">33</option> <div>
<input class="perfumol" type="text" name="perfumol"id="amount2"><br>
<option value=".02">25< </option>div>
</select>
</div>
<div class="col-sm-6 aos-init aos-animate" data-aos="fade-left">
<div class="panel cobros hoverable">
<div class="row">
<div class="col-sm-7 col-xs-7">
<p>Esencia</p>
</div>
<div>
<input type="text" class="esencia" name="esencia"id="amount2"></b></p>
</div>
<div class="col-sm-7 col-xs-7">
<p>Fijador</p>
</div>
<div>
<input class="fijador" type="text" name="fijador"id="amount2"><br>
</div>
<div class="col-sm-7 col-xs-7">
<p>Perfumol</p>
</div>
<div>
<input class="perfumol" type="text" name="perfumol"id="amount2"><br>
</div>
</div>
<div><input class="boton1" type="button" value="dosificacion" onclick="calcular()"></div>
</div>
<div><input class="boton1" type="button" value="dosificacion" onclick="calcular()"></div>
</div>
</form>
<div class="triangle-calculator">
</div>
</section>
</form>
<div class="triangle-calculator">
</div>
<body></section>html>