Faire changer le style d'un élément avec un select

**X260SH** · 23/03/2014, 12h48

Bonjour.

Je débute en JavaScript, et je cherche à faire changer le style d'un élément avec l'aide d'un select.
Voici un exemple :

Code HTML :

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
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
	<link rel="stylesheet" href="styles.css" />
    <title>[JS] Faire changer le style d'un élément</title>
  </head>
 
  <body>
 
  <form name="afficher_image">
	<select onmouseup="afficher_img()" name="select">
		<option value="black" selected="selected">Noir</option>
		<option value="red">Rouge</option>
	</select>
	<input type="text" name="checker" />
  </form>
 
  <div id="myDIV">
  Lorem ipsum dolor sit amet. Amo P...
  </div>
 
  <script>
                function afficher_img()
                {
                        afficher_image.checker.value = afficher_image.select.value;
                        var affichage = afficher_image.select.value;
                        
                        document.getElementsById("myDIV").style.color = affichage;
                }
        </script>
 </body>
</html>

Sauf que si ça fonctionnait... Je ne serai pas là pour en parler :p !
Bon Dimanche, et merci !

**NoSmoking** · 23/03/2014, 15h15

Bonjour,
oubli l'événement onmouseup sur le SELECt, préfères lui onchange.

Quant à ta fonction

Code :

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

1
2
3
4
5
6
function afficher_img() {
  afficher_image.checker.value = afficher_image.select.value;
  var affichage = afficher_image.select.value;
 
  document.getElementsById("myDIV").style.color = affichage;
}

je te laisse la relire pour voir la multitude de choses qui ne vont pas.

...la correction rapide...

Code :

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

1
2
3
4
5
6
function afficher_img() {
//  afficher_image.checker.value = afficher_image.select.value;
  var affichage = afficher_image.select.value;

  document.getElementById("myDIV").style.color = affichage;
}

**X260SH** · 23/03/2014, 17h11

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
<!doctype html>
<html>
<!-- [...] -->
  <body>
 
  <form name="afficher_image">
	<select onchange="afficher_img()" name="select">
		<option value="0" selected="selected">Noir</option>
		<option value="1">Rouge</option>
	</select>
	<input type="text" name="checker" />
  </form>
 
  <div id="myDIV">
	Lorem ipsum dolor sit amet. Amo P...
  </div>  
	<script>
		function afficher_img()
		{
			afficher_image.checker.value = afficher_image.select.value;
			var affichage = afficher_image.select.value;
 
			document.getElementById("myDIV").style.color = affichage;
		}
	</script>
 </body>
</html>

Ca ne marche toujours pas...

**NoSmoking** · 24/03/2014, 21h36

Ca ne marche toujours pas...

on va dire que c'est un peu normal, tu as modifié les value de tes OPTIONs en leurs mettant des valeurs qui ne sont pas reconnu comme couleur.

Le point qui reste important à aborder est la façon dont tu récupères les références à tes différents objets, FORM et INPUT.

Je t'engage à lire Comment accéder aux éléments d'un formulaire ? et par la même la

concernant les Formulaires

**X260SH** · 24/03/2014, 21h58

(facepalm)... C'est vrai que vu comme ça... Merci, en tout cas !
Mais maintenant, j'aimerai faire ça, mais par balise et non plus par id.
Ce que j'ai fait : http://codepen.io/anon/pen/ilzBs.

**NoSmoking** · 24/03/2014, 22h23

si l'on reprend la fonction que tu utilises

Code :

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

1
2
3
4
5
function afficher_img()
{
	var affichage = document.forms['afficher_image'].elements['select'].value;
	document.getElementsTagName(div).style.color = affichage;
}

on constate beaucoup trop d'erreurs dans celle ci
- getElementsTagName, cette méthode n'existe pas mais il existe getElementsByTagName
- la méthode getElementsByTagName retourne une liste d'éléments, il te faut donc boucler sur les éléments retournés
- le paramètre que tu passes, div, est considéré comme une variable

Faire changer le style d'un élément avec un select

JavaScript

Vue hybride

Discussions similaires

Partager

Partager