JSFiddle - React, Tailwind, and code Playground

by Laurent Dufour

HTML

<form id="toto">
  <p>
    <input id="base_finale" type="number" min=0>
    <label for="base_finale">Base finale (ml)</label>
  </p>
  <p>
    <span>Flacons de nicotine (ml) :</span>
    <input type="radio" name="taux_nicotine" id="nicotine_1" value=1>
    <label for="nicotine_1">1</label>
    <input type="radio" name="taux_nicotine" id="nicotine_2" value=2>
    <label for="nicotine_2">2</label>
    <input type="radio" name="taux_nicotine" id="nicotine_6" value=6>
    <label for="nicotine_3">6</label>
  </p>
  <p>
    <input id="arome" type="number" min=0>
    <label for="arome">Arome (%)</label>
  </p>
  <hr>
  <p>
    <output id="out_base_neutre" name="out_base_neutre"></output>
    <label for="out_base_neutre">Base neutre</label>
  </p>
  <p>
    <output id="out_nicotine" name="out_nicotine"></output>
    <label for="out_nicotine">Nicotine</label>
  </p>
  <p>
    <output id="out_flacons_nicotine" name="out_flacons_nicotine"></output>
    <label for="out_flacons_nicotine">flacons</label>
  </p>
  <p>
    <output id="out_arome" name="out_arome"></output>
    <label for="out_arome">ArĂ´mes</label>
  </p>
</form>

  <button class="ui-button ui-corner-all ui-widget" id="button">Calcul</button>

JavaScript

var form = document.getElementById("toto");

var button = document.getElementById("button");
button.addEventListener("click", fonctionquicalcule);

function fonctionquicalcule() {
  var baseFinale = form.base_finale.value;
  var tauxNicotine = form.taux_nicotine.value;
  var tauxArome = form.arome.value;
  if (baseFinale && tauxNicotine && tauxArome) {
    var qteArome = baseFinale * tauxArome / 100;
    var qteNicotine = baseFinale * tauxNicotine / 20;
    
    form.out_arome.value = qteArome;
    form.out_nicotine.value = qteNicotine;
    form.out_flacons_nicotine.value = qteNicotine / 10;
    form.out_base_neutre.value = baseFinale - qteArome - qteNicotine;
  }
}