JSFiddle - React, Tailwind, and code Playground
HTML
<form name="karvonen">
<fieldset>
<legend>
Calculatrice
</legend>
<input type="number" id="age" name="age" maxlength="3" size="6">
<label for="agefc">Votre âge</label>
<br>
<select name="sexe" id="sexe" class="postform">
<option value="-1">Sélectionner votre sexe</option>
<option class="level-0" value="220">Homme</option>
<option class="level-0" value="226">Femme</option>
</select>
<br>
<input type="number" id="fcrepos" name="fcrep" maxlength="3" size="6">
<label for="fcrepos">
pulsations : Fréquence cardiaque au repos
<i>(<acronym title="Fréquence cardiaque au repos">FC repos</acronym>)</i>
</label>
<br>
</fieldset>
<button id="calculer">Calculer</button>
<button type="reset" name="Reset" value="Effacer">Effacer</button>
<fieldset>
<legend>
Résultats
</legend>
<p id="fcmax"></p>
<label for="fcmax">
pulsations : Fréquence cardiaque max
<i>(<acronym title="Fréquence cardiaque max">FC max</acronym>)</i>
</label>
<br>
<p id="fcres"></p>
<label for="fcres">
pulsations : Fréquence cardiaque de réserve
<i>(<acronym title="Fréquence cardiaque de réserve">FC réserve</acronym>)</i>
</label>
</fieldset>
</form>
JavaScript
var age = document.getElementById("age");
var sexe = document.getElementById("sexe");
var fcrepos = document.getElementById("fcrepos");
var fcmax = document.getElementById("fcmax");
var fcres = document.getElementById("fcres");
document.getElementById("calculer").addEventListener("click", function(event) {
event.preventDefault();
if(age.value && sexe.value && fcrepos.value) {
console.log("Calculating...");
fcmax.innerHTML = getFcmax(age.value, sexe.value, fcrepos.value);
fcres.innerHTML = getFcres(age.value, sexe.value, fcrepos.value);
} else {
console.log("There is empty fields");
}
});
function getFcmax(age, sexe, fcrepos) {
var result = (age - sexe) - fcrepos;
return result;
}
function getFcres(age, sexe, fcrepos) {
var result = (age - sexe) - fcrepos;
return result;
}