Eliminer la répétition

Version imprimable

bonjour;

je débute en JS

le but de mon script c'est lorsque je coche un bouton radio un texte apparaît ou se cache et change de couleur
le script est fonctionnel mais je pense que il y a un solution sans faire une boucle ( dans la 2 fonction] en utilisant un simple If

voilà le code HTML

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
 
<script type="text/javascript" src="script.js" />
</script>
 
</head>
 
<body>
 
 
<br />
<select id="select"> 
 
<option></option>
<option value="1">list1</option>
<option value="2">list2</option>
<option value="3">list3</option>
</select> <br /> <br />
 
<form name="form" id="form1" method="POST" action='#'onsubmit="return false">
champ1<input type="text" id="ch1" name="champ1" /> <br /> <br />
champ2<input type="text" id="ch2" name="champ2" /> <br /> <br />
HOME<input type="radio" id="rd1" name="bradio" value="H" /> <br />
Femme<input type="radio" id="rd2" name="bradio" value="F" /><br /> <br />
 
<div id="ab"> salut les hommes</div>
<div id="ac"> salut les femmes</div><br />
 
<input type="submit" id="bouton1" name="bouton" value="appui" onclick="affich();hide()"/>
 
</form>
 
</body>
 
</html>

voilà le code JS

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
// JavaScript Document// JavaScript Document
 
function affich(f)
{
	var cha1 = document.getElementById("ch1").value;
	var cha2 = document.getElementById("ch2").value;
	var cha3 = document.getElementById("select").value;
	var cha4 = "";
 
	for (var i=0; i<document.getElementsByName('bradio').length; i++) {
 
		if (document.getElementsByName('bradio')[i].checked){
			 cha4 = document.getElementsByName('bradio')[i].value;
		}
	}
 
	if (isNaN(cha1)==true)
 
	alert(cha3+" "+cha1+" "+cha2+" "+cha4); 
 
	else {
    alert("chapm Numérique :"+cha1);
	}
 
}
 
function hide()
{
 
var n = document.form.bradio.length;
		for(i=1;i<=n;i++) {
				if ((document.getElementsByName('bradio')[i].checked) == true) {
				document.getElementById('ab').style.display = 'none';
				document.getElementById('ac').style.color="red";
 
			} else {
				document.getElementById('ac').style.display = 'none';
				document.getElementById('ab').style.color="blue";
			}
		}
 
}

voilà une amélioration du code Java script

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
// JavaScript Document// JavaScript Document
 
function affich(f)
{
	var cha1 = document.getElementById("ch1").value;
	var cha2 = document.getElementById("ch2").value;
	var cha3 = document.getElementById("select").value;
	var cha4 = "";
 
	for (var i=0; i<document.getElementsByName('bradio').length; i++) {
 
		if (document.getElementsByName('bradio')[i].checked){
			 cha4 = document.getElementsByName('bradio')[i].value;
		}
	}
 
	if (isNaN(cha1)==true)
 
	alert(cha3+" "+cha1+" "+cha2+" "+cha4); 
 
	else {
    alert("chapm Numérique :"+cha1);
	}
 
}
 
function hide()
{
 
 
		if(document.getElementById('rd1').checked == true) {
			document.getElementById('ac').style.display = "none";
			document.getElementById('ab').style.color="blue";
			} else 
				if(document.getElementById('rd2').checked == true) {
				document.getElementById('ab').style.display = "none";
				document.getElementById('ac').style.color="red";
			}
}

Bonjour,
dans les améliorations il y à la logique à utiliser
Code:

1 2 3 4 5 6 7 8 9 10 function hide() { if (document.getElementById('rd1').checked == true) { document.getElementById('ac').style.display = "none"; document.getElementById('ab').style.color = "blue"; } else if (document.getElementById('rd2').checked == true) { document.getElementById('ab').style.display = "none"; document.getElementById('ac').style.color = "red"; } }
ton élément ab est bleu ou caché donc autant le mettre en bleu dès le départ et ne gérer que le show/hide. Idem pour ton élément ac à la couleur prête.

Tes éléments type="radio" allant de pair il te suffit de tester le premier , le second aura l'état inverse de l'autre.