Valider des options radio avec javascript

**gimnar** · 05/01/2016, 22h31

Bonjour,

Je suis en train de me faire une auto correction d'un exam et je bloque sur cette correction :

voici mon code :

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
 
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<title>Exercice 3 : Bonjour intel</title>
</head>
<body>
	<H1>Exercice 3 : Dit Bonjour à ton utilisateur</H1>
	<p>
		Madame <input type="radio" name="gender" id="gender"  value="Madame">
		Monsieur <input type="radio" name="gender" id="Monsieur" value="Monsieur" checked>
		<!-- Rappel c'est le name qui défini le groupe de btn radio -->
	</p>
	<p>
		Nom <input type="text" name="lname" id="lname" placeholder="Nom de la personne">
	</p>
	<p>
		<input type="submit" name="Valider" value="Valider" onclick="exo3();">
	</p>
	<script type="text/javascript">
	function exo3()
	{
		var gender = document.getElementById("gender").checked;
		var lname  = document.getElementById("lname").value;
 
		if(gender  ==true){
			alert("Bonjour"+" "+ "Madame" + " " + lname );
		}
		else{
			alert("Bonjour"+" "+ "Monsieur" + " " + lname );
		};
 
	};
	</script>
</body>
</html>

J'ai lu a droite et à gauche qu'il y a possibilité de faire mieux, comme par exemple supprimer la chaine de caractère dans l'alert afin que cela devient une variable, mais je ne sais pas faire

.

Donc s'il y a possibilité d'avoir quelques exemple, tuto pour m'aider à comprendre et m'améliorer, je suis prenneur.

Cdt,

Un jeune DevOps en devenir

**SpaceFrog** · 06/01/2016, 08h25

Avec un opérateur ternaire par exemple :

Code :

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

1
2
3
4
 
var gender = document.getElementById("gender").checked;
var lname  = document.getElementById("lname").value;
alert("Bonjour "+(  (gender?)"Madame ":"Monsieur " )+ lname );

**Gaulouis** · 06/01/2016, 08h40

Salut tout le monde,

J'ai vue que les navigateurs moderne implémentais le querySelector.

On pourrai aussi l'utiliser pour faire l'exercice :

Code :

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

1
2
3
4
5
6
7
function exo3()
{
	var gender = document.querySelector('input[name="gender"]:checked').value;
	var lname = document.querySelector('input[name="lname"]').value;
	var message = "Bonjour "+ gender + " " + lname;
	alert(message);
};

A++

**gimnar** · 06/01/2016, 23h47

Merci, j'ai testés les 2 ca fonctionne super bien

Par contre pour le opérateur ternaire, d'après la doc sur le site de Mozilla, il me semble qu'il y a une erreur car Firefox m'indiqué qu'il y avait un prob avec une ) .

Code :

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

1
2
3
4
5
6
7
8
9
 
	function exo3()
	{
		var gender = document.getElementById("gender").checked;
		var lname  = document.getElementById("lname").value;
		var message = "Bonjour" + " " +  (gender ? "Madame" : "Monsieur") + " " + "<span style='font-style:italic'>" + lname + "</span>" ;
 
		mySpan.innerHTML = message;
};