Controle de champs sur 5 input

Il faut créer un événement javascript onkeyup https://javascript.developpez.com/archives/faq-color/?page=formObjs voir onchange et appeler ta function a l'intérieur.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
function pourcent(){
    var pourt1 = Number(document.getElementById("pourcent1").value);
    var pourt2 = Number(document.getElementById("pourcent2").value);
    var pourt3 = Number(document.getElementById("pourcent3").value);
    var pourt4 = Number(document.getElementById("pourcent4").value);
    var pourt5 = Number(document.getElementById("pourcent5").value);
 
    if (pourt1+pourt2+pourt3+pourt4+pourt5 > 100) {
        alert('Vous ne devez pas depasser 100%');
    }
        else {
            return true;
        }
}
 
var inputs = document.querySelectorAll("input[type='text']");
 
for(let i in inputs){
  inputs[i].onkeyup = function(){
    pourcent()
};
}
 
//partie input html j'ai rajouter un attribute pattern afin de forcé les utilisateur a utiliser un pourcentage 0 à 100
<input type="text" pattern="^[1-9][0-9]?$|^100$" id="pourcent5" name="pourcent5"/>

démo : https://codepen.io/headmax/pen/dJEdBK?editors=1011