Salut,
Et sans compter que plusieurs élements HTML ont le même identifiant.
Il faut un élément parent portant l'unique identifiant. Il peut s'agir ici de :
<table id="tab" width="200" border="2">
ou bien de
<tbody id="tab">
Dans l'exemple ci-dessous la couleur des listes de choix n'est pas modifiée pour se rendre compte de l'utilité de la balise <tbody>.
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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<style type="text/css" media="screen">
.white {color:white}
.black {color:black}
.red {color:red}
.green {color:green}
.blue {color:blue}
.yellow {color:yellow}
.cyan {color:cyan}
.chocolate {color:chocolate}
.tomato {color:tomato}
</style>
<script type="text/javascript">
function choisirFond(choix){
var color=choix.value;
if(color=='')color="white";
document.getElementById("tab").style.backgroundColor=color;
document.getElementById("fond1").value=color;
//alert(document.form.fond1.value);
}
function choisirTexte(choix){
var color=choix.value;
if(color=='')color="black";
document.getElementById("tab").style.color=color;
document.getElementById("text1").value=color;
//alert(document.form.text1.value);
}
function soumis(){
var
f=document.getElementById('select_fond'),
t=document.getElementById("select_texte");
alert(
'Soumis :\n\n' +
' Fond : Value=' + f.value + ' ; Couleur = ' + f.options[f.selectedIndex].text + '\n\n' +
'Couleur: Value=' + t.value + ' ; Couleur = ' + t.options[t.selectedIndex].text
);
}
</script>
</head>
<body>
<form action="recup.php" method="post" name="form" onsubmit="soumis();">
<table width="200" border="2">
<tbody>
<tr>
<td>Fond</td>
<td>
<select id="select_fond" name="select_fond" onchange="choisirFond(this);">
<option value="" class="white" selected="selected">Choisir une couleur...</option>
<option value="blue" class="blue">Bleu</option>
<option value="chocolate" class="chocolate">Chocolat</option>
<option value="red" class="red">Rouge</option>
<option value="yellow" class="yellow">Jaune</option>
<option value="green" class="green">Vert</option>
<option value="cyan" class="cyan">Cyan</option>
<option value="tomato" class="tomato">Tomato</option>
</select>
</td>
</tr>
<tr>
<td>Texte</td>
<td>
<select id="select_texte" name="select_texte" onchange="choisirTexte(this);">
<option value="" class="back" selected="selected">Choisir une couleur...</option>
<option value="blue" class="blue">Bleu</option>
<option value="chocolate" class="chocolate">Chocolat</option>
<option value="red" class="red">Rouge</option>
<option value="yellow" class="yellow">Jaune</option>
<option value="green" class="green">Vert</option>
<option value="cyan" class="cyan">Cyan</option>
<option value="tomato" class="tomato">Tomato</option>
</select>
</td>
</tr>
</tbody>
<tbody id="tab">
<tr>
<td colspan="2">Titre</td>
</tr>
<tr>
<td colspan="2">Première ligne</td>
</tr>
<tr>
<td colspan="2">Deuxième ligne</td>
</tr>
</tbody>
</table>
<div>
<input type="hidden" name="fond1" id="fond1" value="" />
<input type="hidden" name="text1" id="text1" value="" />
<input type="submit" value="Envoyer" />
</div>
</form>
</body>
</html> |
changement couleur de fond et de texte
Répondre avec citation
Partager