Discussion :

[Kalimeiro]

Bonjour à tous,

Pour un cas d'école, j'ai un formulaire HTML avec des input type radio et un bout de javascript :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<input type="radio" name="peur_avion" id="peur_avion1" value="1" onclick="Result()">
<input type="radio" name="peur_avion" id="peur_avion2" value="2" onclick="Result()">
<input type="radio" name="peur_avion" id="peur_avion3" value="3" onclick="Result()">
<input type="radio" name="peur_avion" id="peur_avion4" value="4" onclick="Result()">

j'ai fais un bout de javascript qui me permet dans une seule variable de connaître le résultat choisis :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function Result(){
    if(document.getElementById('peur_avion1').checked==true){
        var obj = document.getElementById("peur_avion1")
    }
    else if (document.getElementById('peur_avion2').checked==true){
        var obj = document.getElementById("peur_avion2")
    }
    else if (document.getElementById('peur_avion3').checked==true){
        var obj = document.getElementById("peur_avion3")
    }
    else if (document.getElementById('peur_avion4').checked==true){
        var obj = document.getElementById("peur_avion4")
    }
alert('vous avez peur de l'avion à un niveau de : "'+obj.value+"'")
}

Jusque là, la variable obj.value est soit 1/2/3 ou 4, sauf que je trouve le code lourd car j'ai encore d'autres bouton radio pour d'autres questions et je vois bien que cela va faire 1000 lignes à la fin.

Ma question est : Existe-t-il une solution pour remplacer toutes les conditions par une seule qui me permettrait d'avoir à la fin la valeur choisis dans une variable comme actuellement ?

Merci pour vos lumières.

J'ai commencé par faire ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
if(document.getElementById('peur_avion1').checked==true || document.getElementById('peur_avion2').checked==true || document.getElementById('peur_avion3').checked==true || document.getElementById('peur_avion4').checked==true){
    var obj = document.getElementById("peur_avion1")
}

mais comment inclure dans la variable obj le résultat qui est choisis à savoir 1 2 3 ou 4 ? :-(

En cherchant sur ternet, il me dit que getElementById ne peut contenir qu'un seul argument, donc déjà c'est mort pour ça.

je cherche le moyen de savoir qui du bouton peur_avion1 2 3 ou 4 a été sélectionne, et me retourne le résultat dans la var obj.

Je reviendrais plus tard je dois faire mes devoirs.

Ca fonctionne !

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
function Result(){
    var valeur = ['1', '2', '3', '4'];
    valeur_l = valeur.length;
    for( var i=0; i<valeur_l; i++){
        var name = 'peur_avion' + valeur[i]
        if (document.getElementById(name).checked==true){
            var obj = document.getElementById(name).value
            alert(obj)
        }
    }
}

Et là quand je clique sur 1 2 3 ou 4, ça m'affiche uniquement le résultat voulu dans une seule variable, je suis pas certaine que ce soit la bonne méthode au final... il y a plus de 150 questions... si quelqu'un a une recommandation pour optimiser au mieux je prends

[Watilin]

Utilise la balise code de ce forum (bouton #), ça sera plus clair

Comme tu l'as constaté, ce n'est pas efficace de tester chacun des inputs pour savoir lequel a été cliqué. Il te manque le moyen de connaître dynamiquement cet input. Il y a deux façons de faire :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="radio" name="peur_avion" id="peur_avion1" value="1" onclick="Result(event)">

ou

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="radio" name="peur_avion" id="peur_avion1" value="1" onclick="Result(this)">

Dans un attribut onclick, les variables event et this sont automatiquement « câblées » sur les objets intéressants.

Dans le cas de event, tu reçois un objet qui décrit le clic, en particulier la position (x,y) du curseur et l'élément qui a été cliqué.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function Result(event) {
  var obj = event.target;
  console.log(obj.value);
}

Avec console.log, les messages apparaissent dans la console de ton navigateur (touche F12). C'est comme alert mais en plus pratique

Dans le cas de this tu obtiens directement une référence sur l'input :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
function Result(input) {
  console.log(input.value);
}

Chacune de ces deux méthodes ont leurs avantages, ça dépend de la situation. À toi de choisir celle qui te convient

[Kalimeiro]

Merci beaucoup Watilin, les explications sont claire en plus d'avoir apprise des choses :-)

Toute fois, ma dernière question sur ce sujet, est que j'ai plusieurs input radio ou il y aura ce onclick=Result(this) ou onclick=Result(event) (selon ce que je vais préférer faire), comment faire pour ne pas me mélanger avec les variables qu'il y aura globalement ? je veux dire par là :

var obj = event.target; // qui me dit que le résultat attendu de cette variable sera l'avion, le dentiste, ou le médecin, ou autre ?

J'veux dire par là que j'ai la fameuse question de sur quel degré de 1 à 4 avez vous peur de l'avion, mais aussi le dentiste, le medecin... je ne vois pas comment faire pour tout récupérer d'un coup sans tout mélanger.

[Watilin]

Tu peux utiliser les différents attributs de l'input pour savoir à quel groupe de question il appartient.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
console.log(obj.name); // => "peur_avion"
console.log(obj.id);   // => "peur_avion1"
console.log(obj.name.replace(/peur_(.*)/, "$1")); // => "avion"

Tu peux aussi arpenter l'arbre DOM, notamment pour explorer les éléments parents de l'input :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
var parent = obj.parentNode;
console.log(parent);
console.log(parent.innerHTML);
console.log(parent.textContent);
 
var grandParent = parent.parentNode;
console.log(grandParent); // etc.

Si on suit cette idée d'utiliser les parents, il y a quelque chose qui est un peu plus compliqué mais qui va peut-être t'intéresser. On appelle ça la délégation d'évènements.
Au lieu d'avoir un attribut onclick sur chacun des input, on surveille les évènements sur leur plus proche parent commun. Exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="groupe-avion">
  <label for="peur_avion1">1</label>
  <input type="radio" name="peur_avion" id="peur_avion1" value="1">
 
  <label for="peur_avion2">2</label>
  <input type="radio" name="peur_avion" id="peur_avion2" value="2">
 
  <label for="peur_avion3">3</label>
  <input type="radio" name="peur_avion" id="peur_avion3" value="3">
 
  <label for="peur_avion4">4</label>
  <input type="radio" name="peur_avion" id="peur_avion4" value="4">
</div>

(J'ai ajouté des labels pour le fun.)

Je veux que mon code JavaScript ne soit pas intrusif, c'est-à-dire qu'il ne se mélange pas avec le code HTML. Pour faire ça j'utilise une méthode qui s'appelle addEventListener :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
document.getElementById("groupe-avion").addEventListener("click", function(event) {
  ...
});

Ici je reçois forcément l'objet event en paramètre. Une des choses qui rendent complexe la délégation, c'est le fait qu'on va détecter les clics sur tous les éléments contenus dans #groupe-avion, y compris les labels et autres chose qui pourraient s'y trouver. On va devoir filtrer, au minimum en regardant le tagName des éléments.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
... function(event) {
  var element = event.target;
 
  // si on n'est pas sur un input, on arrête tout de suite, on ne fait rien
  if (element.tagName !== "INPUT") return;
 
  // sinon on continue
 
  console.log(element.name, element.value);
} ...

Voilà, je propose l'idée, libre à toi de t'en servir ou pas.

[Kalimeiro]

Merci c'est très intéressant :-) il faut que je réfléchisses un peu et que je test pour voir, en attendant, ce matin j'ai trouvée une solution en rapport avec le bout de code que j'ai fait, et ça marche super bien :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function Result(){
	var valeur = ['1', '2', '3', '4']; // car il ne peut y avoir qu'une réponse possible d'une échelle de 1 à 4.
	valeur_l = valeur.length; // compte les éléments du tableau, forcément 4.
	for( var i=0; i!=valeur_l; i++){ // boucle for, tant que i est différent du nombre d’éléments du tableau, suivi de l'incrémentation de i.
		if (document.getElementById("peur_avion" + valeur[i]).checked==true){ // test si peur_avion1 a été choisi, non, test peur_avion2 non plus, peur_avion3 ah oui c'est celui là, peur_avion4 ne sera pas choisis non plus.
			var peur_avion = document.getElementById("peur_avion" + valeur[i]).value // on indique la valeur de peur_avion3 dans la variable peur_avion que l'on pourra appeler plus tard pour le résultat.
		}
		if (document.getElementById("peur_dentiste" + valeur[i]).checked==true){
			var peur_dentiste = document.getElementById("peur_dentiste" + valeur[i]).value
		}
		if (document.getElementById("peur_medecin" + valeur[i]).checked==true){
			var peur_medecin = document.getElementById("peur_medecin" + valeur[i]).value
		}
                // ... et ainsi de suite sur toutes mes questions
       }
       console.log("Vous avez peur de l'avion à une échelle de :" + peur_avion + " vous avez peur du dentiste à une échelle de :" + peur_dentiste + " vous avez peur du médecin à une échelle de :" + peur_medecin);
}

Peut importe si je modifie les choix de réponse du questionnaire, les réponses sont modifié en temps réel, tout d'un coup dans une seule variable par question, ... comme je voulais :-) mais je ne suis pas certaine que cela soit optimale, j'ai regardée la consommation de ressource processeur et ram, enfaite ça ne travaille pas beaucoup... donc ma boucle doit être bien faite pour ce coup.

Il faut comprendre autre chose, ma prof qui a fait le questionnaire en HTML, est juste NULLE (si elle regarde un jour ce message, je m'en fiche) , et nous impose à ne faire que du javascript, il y a trop d'erreur et de contrainte que l'on ne peut pas corriger car pas le droit, on doit faire uniquement du javascript...
donc on doit se débrouiller...

[Watilin]

C'est quand même une contrainte intéressante car ça t'oblige à faire du script non intrusif. On travaille mieux quand les trois couches sont bien séparées. Idéalement tu as un fichier par couche :

• couche contenu = fichier HTML
• couche apparence = fichier CSS
• couche interaction = fichier JS

Ta boucle est bien faite en effet, elle ne parcourt pas deux fois le même élément.
Dans la mesure où tu as, disons, 150 questions et 4 valeurs par question, ça fait 150 * 4 = 600 éléments à parcourir. Tu as réussi à factoriser (en informatique, ça veut dire mettre dans une boucle, en gros) le parcours des 4 boutons radio pour chaque question. À présent, n'y aurait-il pas moyen de factoriser aussi le parcours des 150 questions ? Car sinon tu as quand même 150 blocs if à écrire… Je te laisse chercher

En attendant, voici quelques conseils d'amélioration pour ton code.

– Tu as des valeurs de 1 à 4. Pourquoi ne pas simplement faire une boucle qui compte de 1 à 4 ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

for (var i = 1; i <= 4; i++) {

– Quand tu testes une valeur booléenne (vrai/faux), tu n'as pas besoin de comparer avec == :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if (document.getElementById("peur_avion" + i).checked) {

– Mets tes éléments sélectionnés dans des variables intermédiaires, surtout quand la formule de sélection est longue. Ça rend le code plus clair, et au pire ça ne change rien au niveau performances (au mieux ça optimise, mais je crois que les moteurs JavaScript actuels sont capables de faire cette optimisation eux-mêmes).

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
var input_peur_avion = document.getElementById("peur_avion" + i);
if (input_peur_avion.checked) {
  var peur_avion = input_peur_avion.value;
  ...