Donner une valeur à à la selection d'une liste déroulante

Version imprimable

Bonjour à tous !

Voilà j’essaie d'apprendre le javascript et donc, pour débuter, de faire un formulaire.

Dans ce formulaire j'ai plusieurs liste déroulantes avec à chaque fois un contenu différent.
Chaque sélection d'une liste déroulante a une différente.

Le but est qu'au fur et à mesure je fasse l'addition des sélections afin de mettre dans un label "résultat" soit la mention "Great !" si le résultat est supérieur ou égal à 8 soit la mention "Peut mieux faire" si le résultat est inférieur à 8.

Le souci est que j'ai la liste déroulante et les valeurs attribuées mais je ne sais pas les additionner car ce que j'ai fais ne fonctionne pas.

Voici mon code :

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
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
<table>
		<th align="left">CRITERES</th>
		<th>CHOIX</th>
		<tr>
			<td>Niveau anglais</td>
			<td>
			<Form>
			<SELECT name="Choix" size="1" style="width:150px">
			<OPTION>--Choisir--
			<OPTION value="0">Jamais pratiqué
			<OPTION value="1">Faible
			<OPTION value="6">Moyen
			<OPTION value="9">Pro
			</SELECT>
			</Form>
			</td>
		</tr>
		<tr>
			<td>Projet</td>
			<td>
			<Form>
			<SELECT name="Choix1" size="1" style="width:150px">
			<OPTION>--Choisir--
			<OPTION value="0">Non effectué
			<OPTION value="2">Effectué
			</SELECT>
			</Form>
			</td>
		</tr>
		<tr>
			<td>Participation projet</td>
			<td>
			<Form>
			<SELECT name="Choix2" size="1" style="width:150px">
			<OPTION>--Choisir--
			<OPTION value="0">Non
			<OPTION value="1">3pers
			<OPTION value="3">2pers
			<OPTION value="6">1pers
			</SELECT>
			</Form>
			</td>
		</tr>
		<tr>
</table>
<form id=form1 class="displayondemand">
            <label></label> <!-- Resultat //-->
			<input id="ress" name="ress" type="text" value="">
			<br>
			<input type=button value="Valider" onClick="Resul()" /> 
            <input type=reset  value=Annuler>
</form>
 
<script>
 
var selects = document.querySelectorAll('select');
function Resul()
{
        var ouput = "";
        var res=0;
        for(let s in selects)
        {
                  if(selects[s].value !== '--Choisir--')
                  {
                        
                                if(this.value !== 0)
                      {
                                                        res+=selects[s].value
                      }
                   }
   }  
        output=res ;
        if(res>8){
                        document.getElementById('ress').value = 'Great !' + output ;
                }
        if(res<8){
                        document.getElementById('ress').value = 'Peut mieux faire' + output ;
                }
}
</script>

Merci pour votre aide :)

:salut:

Débutant en JS, mais aussi en CSS et en HTML. Le code de la "table" n'était pas conforme et le code JS n'était pas fonctionnel.

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
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
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!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 */
                
                #questions {
                        width: 20rem;
                }
                th, td {
                        padding: 0.3rem;
                        border: 1pt dotted lightgrey;
                }
                
                /* 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
                                elemSelects = Array.from( document.querySelectorAll( "select[name^='Choix']" ) ),
                                elemBtnValider = document.querySelector( "#btnValider" ),
                                elemResult = document.querySelector( "#result" );
                        
                        elemBtnValider.addEventListener( "click", ev => {
                                let result = 0;
                                        
                                for ( const elem of elemSelects ){
                                        if ( elem.value !== "--Choisir--" ){
                                                result += parseInt( elem.value, 10 );
                                        }
                                }
                                
                                if ( result > 8 ){
                                        elemResult.value = `Great ! ( ${result} )`;
                                }
                                
                                if ( result < 8 ){
                                        elemResult.value = `Peut mieux faire ( ${result} )`;
                                }
                        }, false );
 
                        // fin code du test
                        
      kIDUnique();
    }, false );
                
  </script>
</head>
<body>
	<main>
 
		<div id="questions">
			<table>
				<thead>
					<tr>
						<th align="left">CRITERES</th>
						<th>CHOIX</th>
					</tr>
				</thead>
				<tbody>
						<td>Niveau anglais</td>
						<td>
							<select name="Choix" size="1">
								<option>--Choisir--</option>
								<option value="0">Jamais pratiqué</option>
								<option value="1">Faible</option>
								<option value="6">Moyen</option>
								<option value="9">Pro</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>Projet</td>
						<td>
							<select name="Choix1" size="1">
								<option>--Choisir--</option>
								<option value="0">Non effectué</option>
								<option value="2">Effectué</option>
							</select>
						</td>
					</tr>
					<tr>
						<td>Participation projet</td>
						<td>
							<select name="Choix2" size="1">
								<option>--Choisir--</option>
								<option value="0">Non</option>
								<option value="1">3pers</option>
								<option value="3">2pers</option>
								<option value="6">1pers</option>
							</select>
						</td>
					</tr>
				</tbody>
			</table>
 
			<fieldset>
				<legend>Résultats : </legend>
				<button id="btnValider">Valider</button> 
				<output id="result"></output>
			</fieldset>
		</div>
 
	</main>
</body>
</html>

27/02/2018, 08h52
NouveauDev

Bonjour,

Oui en effet je débute.
Merci pour votre réponse et vos commentaires, cela m'a aidé.

Cependant j'ai une autre question : Pourquoi cela ne fonctionne pas sur Explorer ?

Merci pour votre aide.
27/02/2018, 22h49
danielhagnoul

Le JS d'aujourd'hui c'est les normes ES2015, ES2016, ES2017 et ES2018 qui est annoncée ou sortie, je ne sais plus.

De même pour les navigateurs, les dernières versions de Chrome, Firefox et Edge sont capables d'utiliser ES2015+.

La norme ES3 et ES5 de JS est obsolète, mais toujours utilisable dans les navigateurs dignes de ce nom.

IE (Internet Explorer) est archi obsolète et complètement abandonné par Microsoft.

Vous devez étudier le HTML5, le CSS3 et le JS ES2015 au minimum et vous servir de Chrome (mon préféré) ou de Firefox (très bon aussi).

Pour utiliser du code ES2015+ sur IE il faut le convertir en ES5 avec Babel, voir dans ma signature.