Fonction d'affichage résultat radiobutton
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> |
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> |