Eliminer la répétition

**iMech** · 24/11/2015, 14h05

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 :

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
<!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 :

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
// 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";
			}
		}
 
}

**iMech** · 24/11/2015, 15h17

voilà une amélioration du code Java script

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
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";
			}
}

**NoSmoking** · 25/11/2015, 19h58

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

Code :

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

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.

Eliminer la répétition

JavaScript

Discussions similaires

Partager

Partager