make a select of two different values

0

Good afternoon I have this code but I would like that when choosing a quantity of the select (n6) have a different amount in this case the amount that appears in the value of the select. Thank you in advance for your valuable support.

<!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" 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>
                                 <div><input class="boton1" type="button" value="dosificacion" onclick="calcular()"></div>

                            </div>


                </div>

                </form>
                <div class="triangle-calculator">

                </div>
            </section>




</body></html>
    
asked by Java 22.09.2018 в 23:49
source

0 answers