Fonction d'affichage résultat radiobutton

Version imprimable

Bonjour,

je souhaite faire une fonction qui lorsqu'on clique sur un bouton, dans la premiere case d'un tableau, affiche dans la troisieme case le texte du radio button qui est coché dans la deuxieme...

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
<!DOCTYPE>
	<html>
		<head>
			<title>
			Document test
			</title>
			<STYLE type="text/css">
      		h1 { color: navy; } 
      		#T1 {
      		text-align:center; 
      		border: 10px outset grey;
      		background:white;
      		}
      		TD{
      		width:30%;
      		BORDER-STYLE:SOLID; 
      		BORDER-COLOR:BLUE; 
      		text-align:center; 
      		font-weight: bold;
      		background-color: #556B2F;
      		}
      		th{
      		BORDER-STYLE:SOLID; 
      		BORDER-COLOR:RED;
      		}
      		#div1{
      		background: #a1f2c3; 
      		}
 
      		</STYLE>
      		<script type="text/javascript">
      		function affich("group1"){
 
      		}
 
      		</script>
      		</head>
		<body>
			<h1 align="center">
			ceci est un exercice
			</h1>
			<p>un exercice pratique
			</p>
			<div style="border: 11px solid black;" id="div1">
			<table width="60%" id="T1" align="center">
				<tr> 
					<th colspan="3" text-align="center"><h2>Mon tableau</h2></th>
				</tr>
				<tr> 
					<th>first</th>
					<th>deuxio</th>
					<th>troisiemement</th>
				</tr>
				<tr>
					<td><button type="button" onclick="affich("group1")">Vérification</button></td>
					<td><input type="radio" name="group1" value="Milk"> Milk<br>
						<input type="radio" name="group1" value="Butter" checked> Butter<br>
						<input type="radio" name="group1" value="Cheese"> Cheese
						<hr>
						<input type="radio" name="group2" value="Water"> Water<br>
						<input type="radio" name="group2" value="Beer"> Beer<br>
						<input type="radio" name="group2" value="Wine" checked> Wine<br></td>
					<td>???</td>
				</tr>
				<tr> 
					<td>1</td>
					<td>2</td>
					<td>3</td>
				</tr>	
				<tr> 
					<td>a</td>
					<td>b</td>
					<td>c</td>
				</tr>
			</table>
			</div>
</body></html>

11/12/2012, 08h18
Bovino
Code:

1 2 3 function affich("group1"){ }
:roll:

Doit-on traduire "je souhaite faire une fonction" par "faites-moi une fonction" ? :whistle:

Le but du forum n'est pas de faire ton travail mais de t'aider à surmonter des problèmes que tu rencontres. Commence par coder ta fonction et reviens nous voir si tu as des difficultés...
11/12/2012, 10h55
armoirapizza

It is indeed....

Je reviendrai avec du code. Et cette fois, attention les yeux:calim2:

J'avoue ça fait un peu fainéant...

Le but c'est de prendre la valeur avtive dans radiobutton et lorsque je clique sur le bouton de vérification, ça balance l'info dans une zone texte...

Je vais essayer de trouver les expressions utiles et vous présenterai ça avec plaisir.

Merci pour la réponse tout de même.

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
<script type="text/javascript">
	function Affich(){
		var nouv=document.getElementById("td3");
		nouv.innerHTML=document.getElementById("group1").value;
		if (nouv.value== Milk){
			alert("c'est bon le lait");return true;
		}else{
			alert("vous n'aimez pas le lait?"); return false;
		}
	}
<!--
//-->
</script>
</head>
	<body>
		<div>
			<table border="5px, solid, black" width="50%">
				<tr>
					<td><input type="button" value="cliquez ici" onclick="Affich()"></td>
					<td>
						<input type="radio" name="group1" value="Milk"> Milk<br>
						<input type="radio" name="group1" value="Butter" checked> Butter<br>
						<input type="radio" name="group1" value="Cheese"> Cheese
					</td>
					<td><div id="td3"></div></td>
				</tr>
 
			</table>
		</div>
 
</body>
</html>

Bonjour,
je n'arrive pas a faire afficher les boite "alert"...

Code:

1
2
3
4
5
6
7
8
9
function Affich(){
		var nouv=document.getElementById("group1").value;
		nouv.innerHTML=document.getElementById("group1").value;
		if (nouv.value== Milk){
			alert("c'est bon le lait");return true;
		}else{
			alert("vous n'aimez pas le lait?"); return false;
		}
	}

11/12/2012, 13h05
vermine

Bonjour,

D'abord vous comparez une variable Milk au lieu de la valeur 'Milk' :

Code:

(nouv.value == 'Milk')

Ensuite, vous faites un getElementById sur... un name. ;)

Puis vous mélangez les variables, les value et les innerHTML. :-o
11/12/2012, 13h16
armoirapizza

re,
Ok, donc pour le cas des radio button,si je leur rajoute un id différent à chacun ensuite je dois faire un if pour vérifier lequel est "checked"?
11/12/2012, 13h21
vermine

Le plus simple est de faire un document.getElementsByName("group1");, de boucler sur le résultat et de vérifier si l'élément en cours est checked.

re bonjour,

voici donc un nouvel essai sans résultat probant....
I try pourtant, ich probiere...

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
<script type="text/javascript">
	function Affich(){
		var nouv=document.getElementById("").value;
		if{
		var nouv=document.getElementById("i1").value
			document.getElementById('result').value="vous aimez le lait";	
		}else if{
			var nouv=document.getElementById("i2").value
			document.getElementById('result').value="vous aimez le butter";
		}else if{
			var nouv=document.getElementById("i3").value
			document.getElementById('result').value="vous aimez le cheese";
		}
	}
<!--
//-->
</script>
</head>
	<body>
		<div>
			<table border="5px, solid, black" width="50%">
				<tr>
					<td><input type="button" value="cliquez ici" onclick="Affich()"></td>
					<td>
						<input type="radio" name="group1" value="Milk" id="i1"> Milk<br>
						<input type="radio" name="group1" value="Butter" id="i2" checked> Butter<br>
						<input type="radio" name="group1" value="Cheese"id="i3" > Cheese
					</td>
					<td><div id="td3"><p>Résultat <input type="text" name="result" id="result"></p</div></td>
				</tr>
 
			</table>
		</div>
 
</body>

11/12/2012, 13h33
vermine
Ouille. :aie:

Vos if n'ont pas de condition. Reprenez vos esprits et recommencer en consolidant vos bases JavaScript. ;)
Code:

1 2 3 4 if(conditions) { instructions }
Revoyez aussi votre logique car là vous ne vérifiez rien du tout.

Et comme ça?
Je teste la valeur que prend la valeur "nouv" et result prend la string après le = ..?

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
<script type="text/javascript">
	function Affich(){
		if(var nouv=document.getElementById("i1").value){
			document.getElementById('result').value="vous aimez le lait";	
		}else if(var nouv=document.getElementById("i2").value){
			document.getElementById('result').value="vous aimez le butter";
		}else if(var nouv=document.getElementById("i3").value){
			document.getElementById('result').value="vous aimez le cheese";
		}
	}
<!--
//-->
</script>
</head>
	<body>
		<div>
			<table border="5px, solid, black" width="50%">
				<tr>
					<td><input type="button" value="cliquez ici" onclick="Affich()"></td>
					<td>
						<input type="radio" name="group1" value="Milk" id="i1"> Milk<br>
						<input type="radio" name="group1" value="Butter" id="i2" checked> Butter<br>
						<input type="radio" name="group1" value="Cheese"id="i3" > Cheese
					</td>
					<td><div id="td3"><p>Résultat <input type="text" name="result" id="result"></p></div></td>
				</tr>
 
			</table>
		</div>

ou comme ça....

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
<script type="text/javascript">
	function Affich(){
		var radioType = document.getElementsByName("group1"); 
		var checked = false; 
		for (var cpt = 0 ; (cpt < radioType.length) && !checked ; cpt++) { 
			checked = checked || radioType[cpt].checked; 
		} 
		if (!checked) { 
			alert("Sélectionnez un type"); 
		} else { 
			document.getElementById('result').value=radiotype.checked.value;
		}
	} 
</script>
</head>
	<body>
		<div>
			<table border="5px, solid, black" width="50%">
				<tr>
					<td><input type="button" value="cliquez ici" onclick="Affich()"></td>
					<td>
						<input type="radio" name="group1" value="Milk" id="i1"> Milk<br>
						<input type="radio" name="group1" value="Butter" id="i2" checked> Butter<br>
						<input type="radio" name="group1" value="Cheese"id="i3" > Cheese
					</td>
					<td><div id="td3"><p>Résultat <input type="text" name="result" id="result"></p></div></td>
				</tr>
 
			</table>
		</div>
 
</body>

ou encore comme ça...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
function Affich(){
		var radioType = document.getElementsByName("group1"); 
		var checked = false; 
		for (var cpt = 0 ; (cpt < radioType.length) && !checked ; cpt++) { 
			checked = checked || radioType[cpt].checked; 
		} 
		if (!checked) { 
			alert("Sélectionnez un type"); 
		} else { 
			document.getElementById('result').value=document.getElementByName('group1).checked.value;
		}
	}

Si quelqu'un avait une idée....:aie:

voici une autre proposition...

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>
	<html>
		<head>
			<title>Titre</title>
			<style type="text/css">
			td{
			width:33%;
			}
			</style>
			<script type="text/javascript">
 
				var but = document.getElementById("button");
				var radio = document.getElementsByName("group1");
				var result = document.getElementById("result");
 
				but.addEventListener("click", function(){
					for(var i =0; i< radio.length; i++){
						if(radio[i].checked){
							result.value = radio[i].value;
			    			}
					}
				},false);
			</script>
		</head>
		<body>
			<div>
			<table border="5px, solid, black" width="50%">
				<tr>
					<td><input type="button" value="cliquez ici" id="button"></td>
					<td>
						<input type="radio" name="group1" value="Milk" id="i1"> Milk<br>
						<input type="radio" name="group1" value="Butter" id="i2" checked> Butter<br>
						<input type="radio" name="group1" value="Cheese"id="i3" > Cheese
					</td>
					<td><div id="td3"><p>Résultat <input type="text" name="result" id="result"></p>
					</div></td>
				</tr>
 
			</table>

11/12/2012, 20h24
NoSmoking

Bonsoir,
tu te lances dans le CODETHON ?

Ma contribution, on ne peut utiliser un élément que lorsque celui ci existe dans le DOM, en d'autres termes places ton SCRIPT après la déclaration de tes éléments.
12/12/2012, 07h43
Bovino

Allez, moi aussi j'y vais de ma petite contribution : getElementsByName(), comme son "s" l'indique, renvoie une collection d'objets HTML, donc les propriétés telles que checked ne sont pas directement accessibles !
12/12/2012, 18h50
NoSmoking

Citation:

Envoyé par armoirapizza (MP)

Bonsoir,

merci pour la réponse.
ça veut dire que je dois mettre le code javascript après l'html?

ps : codethon c'est en référence au fait que je suis pas trop:ccool: ?

- OUI
- non au TELETHON uniquement ;)

différence entre deux disposition du code

Bonjour,

pourriez vous m'expliquer entre les deux codes ci dessous pourquoi l'un fonctionne et l'autre non.
(En cours, on nous dit de mettre le javascript entre les balises head dans le cas où il est sur le même fichier que l'html...)

1/ le script est sous le 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
<!doctype html>
<html>
	<head>
		<title>test</title>
		<meta charset="UTF-8" />
 
 
</head>
	<body>
		<div>
			<table border="5px, solid, black" width="50%">
				<tr>
					<td>
					<input type="button" value="cliquez ici" id="button">
					</td>
					<td>
					<input type="radio" name="group1" value="Milk" id="i1">
					Milk
					<br>
					<input type="radio" name="group1" value="Butter" id="i2" checked>
					Butter
					<br>
					<input type="radio" name="group1" value="Cheese"id="i3" >
					Cheese </td>
					<td>
					<div id="td3">
						<p>
							Résultat
							<input type="text" name="result" id="result">
						</p>
					</div></td>
				</tr>
			</table>
		</div>
 
	</body>
		<script type="text/javascript">
			var but = document.getElementById("button");
			var radio = document.getElementsByName("group1");
			var result = document.getElementById("result");
 
			but.addEventListener("click",function()
				{
					for(var i =0; i< radio.length; i++)
						    {
						    	if(radio[i].checked)
						    		{
						    			result.value =radio[i].value;
						    		}
						    }
				},false);
 
			</script>
</html>

2/ le script est entre les balises head:

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
<!doctype html>
<html>
	<head>
		<title>test</title>
		<meta charset="UTF-8" />			
		<script type="text/javascript">
			var but = document.getElementById("button");
			var radio = document.getElementsByName("group1");
			var result = document.getElementById("result");
 
			but.addEventListener("click",function()
				{
					for(var i =0; i< radio.length; i++)
						    {
						    	if(radio[i].checked)
						    		{
						    			result.value =radio[i].value;
						    		}
						    }
				},false);
 
			</script>
 
</head>
	<body>
		<div>
			<table border="5px, solid, black" width="50%">
				<tr>
					<td>
					<input type="button" value="cliquez ici" id="button">
					</td>
					<td>
					<input type="radio" name="group1" value="Milk" id="i1">
					Milk
					<br>
					<input type="radio" name="group1" value="Butter" id="i2" checked>
					Butter
					<br>
					<input type="radio" name="group1" value="Cheese"id="i3" >
					Cheese </td>
					<td>
					<div id="td3">
						<p>
							Résultat
							<input type="text" name="result" id="result">
						</p>
					</div></td>
				</tr>
			</table>
		</div>
 
	</body>
 
</html>

13/12/2012, 14h05
vermine
C'est de la chronologie.

Lorsque vous mettez votre code dans le <head>, vous faites références à des éléments HTML qui ne sont pas encore créés.

A l'époque, on conseillait de mettre le JavaScript dans les balises <head> sans doute pour structurer le code. Mais, il faut attendre le chargement du <body>. Donc généralement, on encapsule le code dans une fonction init() :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <head> <script type="text/javascript"> function init() { //... } </script> </head> <body onload="init();">  </body>
13/12/2012, 14h34
armoirapizza

Ok, got it!
Merci