Fonction d'affichage résultat radiobutton

**armoirapizza** · 10/12/2012, 22h20

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 :

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

**Bovino** · 11/12/2012, 08h18

Code :

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

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

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

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...

**armoirapizza** · 11/12/2012, 10h55

It is indeed....

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

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.

**armoirapizza** · 11/12/2012, 12h58

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

**armoirapizza** · 11/12/2012, 13h00

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

Code :

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

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

**vermine** · 11/12/2012, 13h05

Bonjour,

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

Code :

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

(nouv.value == 'Milk')

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

Puis vous mélangez les variables, les value et les innerHTML.

**armoirapizza** · 11/12/2012, 13h16

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"?

**vermine** · 11/12/2012, 13h21

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.

**armoirapizza** · 11/12/2012, 13h28

re bonjour,

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

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

**vermine** · 11/12/2012, 13h33

Ouille.

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

Code :

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

1
2
3
4
if(conditions)
{
   instructions
}

Revoyez aussi votre logique car là vous ne vérifiez rien du tout.

**armoirapizza** · 11/12/2012, 15h37

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

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

**armoirapizza** · 11/12/2012, 15h58

ou comme ça....

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

**armoirapizza** · 11/12/2012, 16h39

ou encore comme ça...

Code :

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

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....

**armoirapizza** · 11/12/2012, 17h38

voici une autre proposition...

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

**NoSmoking** · 11/12/2012, 20h24

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.

**Bovino** · 12/12/2012, 07h43

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 !

**NoSmoking** · 12/12/2012, 18h50

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

?

- OUI
- non au TELETHON uniquement

**armoirapizza** · 13/12/2012, 13h59

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 :

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

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

**vermine** · 13/12/2012, 14h05

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

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

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>

**armoirapizza** · 13/12/2012, 14h34

Ok, got it!
Merci

Fonction d'affichage résultat radiobutton

JavaScript

Discussions similaires

Partager

Partager