Simplification de code

**phanoulevoyou** · 25/02/2018, 16h09

Bonjour,
petite question simplissime pour vous les experts, je cherche à simplifier mon code.
Je souhaite lors de l'ouverture de ma page ou lorsque je la remets à zéro, mettre tous les "radio" en "checked = false".

Pour cela j'utilise simplement le code suivant :

Code :

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

1
2
3
document.getElementById("rad1").checked = false;
document.getElementById("rad2").checked = false;
document.getElementById("rad3").checked = false;

Ma question, suis-je obligé de mettre un id pour chaque input ?
Comment je peux récupérer mon "type=radio" et le faire passer en checked sans répéter mes lignes de code ?

Code HTML :

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

1
2
3
4
5
6
7
8
9
10
11
<div class="question">
Quelle est la couleur du cheval blanc d Henri 4 ? <br/>
		<input type="radio" name="quest3" value="rad1" id="rad1"/>
			<label>Violet</label><br/>
		<input type="radio" name="quest3" value="rad2" id="rad2"/>
			<label>Bleu</label><br/>
		<input type="radio" name="quest3" value="rad3" id="rad3"/>
			<label>Blanc</label><br/>
		<input type="submit" id="vrai3" value="Valider" onclick="vrai3()"/>	
		<span id="vraiQ3"></span><br/>
</div>

idem pour le code suivant :

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
function vrai3(){
	if (document.getElementById("rad3").checked==true) {
		document.getElementById("vraiQ3").innerHTML = "Bonne réponse.";
		document.getElementById("vraiQ3").style.color = "green";
		leCompteur.innerHTML = i++;
		document.getElementById("rad1").disabled = "disabled";
		document.getElementById("rad2").disabled = "disabled";
		document.getElementById("rad3").disabled = "disabled";
	}else{
		document.getElementById("rad1").disabled = "disabled";
		document.getElementById("rad2").disabled = "disabled";
		document.getElementById("rad3").disabled = "disabled";
		document.getElementById("vraiQ3").innerHTML = "Mauvaise réponse."
		document.getElementById("vraiQ3").style.color = "red";
	}
}

De quelle façon je pourrais raccourcir la taille de mon code ?

Merci de votre contribution à me faire évoluer...(débutant en herbe)

**mathieu** · 25/02/2018, 16h40

ce genre de code peut être simplifié avec des boucles

par exemple avec le code suivant, vous définissez la liste des réponses au début de votre code et vous pouvez ensuite utiliser plusieurs fois cette liste dans votre code :

Code :

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

1
2
3
4
5
var listeReponses = ["rad1", "rad2", "rad3"];
 
for (var index in listeReponses) {
    document.getElementById(listeReponses[index]).checked = false;
}

**phanoulevoyou** · 25/02/2018, 17h06

Merci, ce petit bout de code fonctionne parfaitement et simplifie et surtout allège mon code.
Bonne journée.

**Beginner.** · 25/02/2018, 17h28

Envoyé par phanoulevoyou

Ma question, suis-je obligé de mettre un id pour chaque input ?

Non, tu peux récupérer tous les input par leur tagName

**danielhagnoul** · 25/02/2018, 23h49

Il a souvent plusieurs manières de travailler possibles, exemple avec un seul ID par question :

Code HTML :

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<!-- cache-control avec max-age=60 pour le développement uniquement -->
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
	<title>Test</title>
  <style>
                *,
                *:after,
                *:before {
                        box-sizing: border-box;
                }
                
                /* CSS du test */
 
                fieldset {
                        display: block;
                        width: 23rem;
                        margin-left: 2rem;
                        margin-bottom: 2rem;
                }
                label {
                        /*display: block;*/
                        padding: 0.3rem;
                }
                button {
                        margin: 0.3rem;
                }
                output {
                        display: block;
                }
                                
                /* Fin CSS du test */
 
  </style>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/locale/fr.js"></script>
	<script src="http://danielhagnoul.developpez.com/lib/dvjh/dvjhUtilities-1.5.0.js"></script>
	<script>
    'use strict';
 
                document.addEventListener( "DOMContentLoaded", ev => {
                        // le DOM est construit, la page web n'est pas visible
                        moment.locale( "fr" );
                        klog( `DOM ready   : ${ new kDvjhDate() }` );
                        
                        // code du test
                
                
                        // fin code du test
                        
                }, false );
    
    window.addEventListener( "load", ev => { 
                        // le DOM est construit et la page web est visible
                        klog( `Window load : ${ new kDvjhDate() }` );
                        
      // code du test
                        
                        const
                                elemQuestion3 = document.querySelector( "#question3" ),
                                elemValider3 = elemQuestion3.querySelector( "button" ),
                                elemOutput3 = elemQuestion3.querySelector( "output" ),
                                elemInput3 = elemQuestion3.querySelector( "input[value='OK']" ),
                                elemInputs3 = Array.from( elemQuestion3.querySelectorAll( "input" ) );
                                
                        for ( const elem of elemInputs3 ){
                                elem.checked = false;
                        }
                        
                        elemValider3.addEventListener( "click", ev => {
                                if ( elemInput3.checked === true ){
                                        elemOutput3.value = "Bonne réponse";
                                } else {
                                        elemOutput3.value = "Mauvaise réponse";
                                }
                        
                                for ( const elem of elemInputs3 ){
                                        elem.disabled = true;
                                }
                        }, false );
 
                        // fin code du test
                        
      kIDUnique();
    }, false );
                
  </script>
</head>
<body>
	<main>
 
		<fieldset id="question3">
			<legend>Quelle est la couleur du cheval blanc d'Henri 4 ?</legend>
			<label><input type="radio" name="question3" value="KO"> Violet</label>
			<label><input type="radio" name="auestion3" value="KO"> Bleu</label>
			<label><input type="radio" name="question3" value="OK"> Blanc</label>
			<button>Valider</button>
			<output></output>
		</fieldset>
 
	</main>
</body>
</html>

**NoSmoking** · 26/02/2018, 11h10

Bonjour,
comme le dit Daniel ❝Il a souvent plusieurs manières de travailler possibles ❠ une qui est peut souvent exploitée est l'application de la méthode reset au <form>, il faut bien sûr qu'il existe donc à ajouter.

En partant du code de Daniel on aurait

Code :

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

1
2
3
4
5
6
7
8
9
elemValider3.addEventListener('click', ev = > {
  var txt = elemInput3.checked === true ? 'Bonne réponse' : 'Mauvaise réponse';
  // supprime action par défaut
  ev.preventDefault();
  // reset des champs
  ev.target.form.reset();
  // affiche information
  elemOutput3.value = txt;
}, false);

Simplification de code

JavaScript

Discussions similaires

Partager

Partager