Calcul de pourcentage

Bonjour

Je cherche à calculer automatiquement le pourcentage entre deux valeurs incrémentées par un bouton +

L'idée : j'ai deux candidats qui obtiennent des votes. Le pourcentage pour chaque candidat évolue automatiquement en fonction du nombre de voix qui s'ajoutent.


Voilà mon script :

<input type="text" id="text1" value="0" readonly="true">  
<input type="submit" value="+" onClick="modifier_un(1)">

<input type="submit" value="+" onClick="modifier_deux(1)">  
<input type="text" id="text2" value="0" size="3" readonly="true">

<p id="pourcentage1"></p>
<p id="pourcentage2"></p>

<script language="javascript">
var valeur1=0
function modifier_un(increment) {
valeur1+=increment;
document.getElementById('text1').value=valeur1;
}


var valeur2=0;
function modifier_deux(increment) {
valeur2+=increment;
document.getElementById('text2').value=valeur2;
}    


var x = document.getElementById("text1");
var y = document.getElementById("text2");
var a = (x / (y + x)) * 100
var b = 100 - a
document.getElementById("pourcentage1").innerHTML = a.toFixed(2) +"%";
document.getElementById("pourcentage2").innerHTML = b.toFixed(2) +"%";

</script>

Je n'arrive pas à obtenir les deux pourcentages. Pouvez vous me mettre sur la voie ? Merci beaucoup.
Modifié par daggoon (17 Feb 2018 - 07:03)

Et l'eau,

Je vais corriger ton code pour que tu comprennes tes erreurs :
- Sémantiquement parlant, ton code html est bancale (2 submit ?? et pas de formulaire ??).
- tu déclares 2 fois une fonction qui fait strictement la même chose. Ça n'a pas de sens.
- ton calcule de pourcentage me parait bancal. Pourquoi la formule x /..... ? Pourcentage par rapport à quoi ?
- input type texte pour ce genre de chose me parait moins adapté à la situation. Or, il y a plus pertinent.

  <div>
    <label for="a">user A</label><br>
    <input type="number" id="a" name="a" value="0" min="0">
  </div>
  <div>
    <label for="a">user B</label><br>
    <input type="number" id="b" name="b" value="0" min="0">
  </div>
  <div>
    <button id="calculPourcentage">calculer</button>
  </div>

<div>
  <p id="pourcentage1"></p>
  <p id="pourcentage2"></p>  
</div>

function modifier(){
  document.getElementById("pourcentage1").innerHTML = document.getElementById('a').value +"%";
  document.getElementById("pourcentage2").innerHTML = document.getElementById('b').value +"%";
}

document.getElementById('calculPourcentage').addEventListener('click', modifier);

On pourrait utiliser un autre type d'input (range). Mais le code javascript serait différent avec des notions complémentaires à connaître (si on souhaite coder avec élégance (KISS & DRY)).

Je te conseille d'approfondir tes connaissances en html5 avant de vouloir passer à la vitesse supérieur.

N'hésite pas à poser des questions
Modifié par niuxe (17 Feb 2018 - 14:08)

Je n'ai pas été clair sur ce que je veux faire. J'ai un candidat 1. A chaque clic sur un bouton, ça lui ajoute 1 voix. Idem pour le candidat 2.

J'aimerais qu'à chaque clic sur le bouton du candidat 1 ou celui du candidat 2, ça me calcule automatiquement le pourcentage pour chacun par rapport au nombre total des voix.

Exemple :

User A a 12 voix = 67%
User B a 6 voix = 33%
Modifié par daggoon (17 Feb 2018 - 14:08)

Alors, suivant la structure et la logique initiale de mon code (html et JS), comment vois tu la solution ?
pour te donner une piste :
- tu te crées une fonction increment avec une variables en argument. valeurA ou valeurB sont incrementés ou décrémentés suivant quel input a été modifié .
- tu te crées une fonction affichage. Comme argument de la fonction affichage, il y aura les valeurs de valeurA et valeurB. Dans cette fonction et pour le moment, tu te charges d'afficher simplement les données avant de faire tes calculs.
- À chaque changement sur un input tu exécutes les fonctions initialement crées.

Voilà ce que tu devrais obtenir en fin de script d'une manière "sale" (not DRY).

document.getElementById('a').addEventListener('change', function(){
  increment('a');
  affichage(valeurA, valeurB);
});
document.getElementById('b').addEventListener('change', function(){
  increment('b');
  affichage(valeurA, valeurB);
});

Modifié par niuxe (17 Feb 2018 - 15:22)

Je vais chercher