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