JSFiddle - React, Tailwind, and code Playground

by wiltomap

HTML

<form method="post" action="">
    <div>
        <label for "champ1">Champ 1 :</label>
        <input name="champ1" id="id1"/>
    </div>
    <div>
        <label for "champ2">Champ 2 :</label>
        <input name="champ2" id="id2"/>
    </div>
    <div>
        <label for "champ3">Champ 3 :</label>
        <input name="champ3" id="id3"/>
    </div>
</form>

<input type="button" value="CALCUL" id="bouton" onclick="calcul();"/>

<div id="resultat"></div>

CSS

div, input {
    font-family: arial;
    font-size: 0.75em;    
}

#bouton {
    margin-top: 20px;
    margin-bottom: 20px;
}

#resultat {
    color: white;
    background-color: blue;
    padding: 5px;
    width: 100px;
    border-radius: 3px;
    height: 20px;
    text-align: center;
}

JavaScript

function calcul() {
    
    var val1 = parseFloat(document.getElementById('id1').value) ;
    var val2 = parseFloat(document.getElementById('id2').value) ;
    var val3 = parseFloat(document.getElementById('id3').value) ;
    
    var resultat = (val1 + val2) / val3 ;
    
    document.getElementById('resultat').innerHTML = resultat ;
    
}