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

Version imprimable

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:

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 !

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

Quant à ta fonction
Code:

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:

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

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

24/03/2014, 21h36
NoSmoking

Citation:

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 :faq: concernant les Formulaires
24/03/2014, 21h58
X260SH

(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.
24/03/2014, 22h23
NoSmoking
si l'on reprend la fonction que tu utilises
Code:

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
24/03/2014, 22h37
X260SH

Ouais, mais... Enfin, je ne comprends pas. Comment sont nommés les élement retourner par getElementsByTagName ?
25/03/2014, 10h02
xoorus

Je ne sais pas si j'ai bien saisi ta question, mais GetElementByTagName retourne les éléments portant le nom de balise que tu as donné.
Le plus simple est de passer par les id si tu veux cibler un élément ciblé.
25/03/2014, 16h57
X260SH

Par id, c'est bien, mais ça serait pour plusieurs éléments...
Et ce que je voulais dire, c'est : comment est ce que getElementsByTageName renvoie les éléments ? Dans un array ? Je demande pour savoir comment mettre ça dans une boucle.
25/03/2014, 17h13
Bovino

Et depuis hier soir, tu n'as pas été capable de taper getElementsByTagName dans Google pour te renseigner ? :weird:
25/03/2014, 18h23
X260SH

Je l'ai naturellement fais, avant même de penser à poster ici. Cependant je n'ai jamais fais de JavaScript auparavant, et donc, je ne comprends pas vraiment tout ce qui est dit à propos de getElementsByTagName. Désolé.

J'ai ici un exemple :
Code:

1 2 3 4 5 6 7 var cells = document.getElementsByTagName("td"); for (var i = 0; i < cells.length; i++) { status = cells[i].getAttribute("status"); if ( status == "open") { // récupère les données } }
liste = element.getElementsByTagName(balise)
liste est une liste de nœuds contenant les éléments trouvés

27/03/2014, 10h30
Golgotha

X260SH, tu t'en sort ?
27/03/2014, 21h30
X260SH

J'essaye de comprendre ce que représente 'length' et 'status' dans l'exemple que l'on m'a donné. Pouvez-vous l'éclairer ?

Voici un explication détaillé.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 <form name="afficher_image">
    <select onchange="afficher_img()" name="select">
        <option value="blue" selected="selected">Bleu</option>
        <option value="red">Rouge</option>
    </select>
</form>
 
  <div class="mes_divs">
    Lorem ipsum dolor sit amet. Amo P...
  </div>  
  <div class="mes_divs">
    Lorem ipsum dolor sit amet. Amo P...
  </div>  
  <div class="mes_divs">
    Lorem ipsum dolor sit amet. Amo P...
  </div>  
  <div class="mes_divs">
   Lorem ipsum dolor sit amet. Amo P...
  </div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function afficher_img(){
// on affecte à la variable affichage l'option sélectionné dans le select. 
    var affichage = document.forms['afficher_image'].elements['select'].value;
// getElementsByClassName permet de sélectionner tout les éléments html d'une class particulière. 
// ici on affecte à la variable cells tous les éléments avec la class mes_divs 
    var cells = document.getElementsByClassName("mes_divs");
 
// on fait une boucle sur chaque élément de la variable cells 
    for (var i = 0; i < cells.length; i++) { 
    cells[i].style.color = affichage; // Pour chaque éléments on change ça couleur avec le contenu de la variable affichage 
    }
}

.length permet de connaitre la taille d'un tableau.
for (var i = 0; i < cells.length; i++) cette ligne équivaut à dire, "incrémente la variable i de 0 à la taille du tableau cells"

http://codepen.io/anon/pen/ufIeh/

Est ce que tout est claire ?

28/03/2014, 17h10
X260SH

Donc, getElementsByClassName renvoie un array, dont on connais la taille grâce à array.length ?
Si c'est ça, je vous remercie énormément, et dans ce cas, oui, tout est clair ! Merci !
29/03/2014, 11h52
NoSmoking

Je ne cherche pas à embrouiller mais...

Citation:

Envoyé par X260SH

Donc, getElementsByClassName renvoie un array,...

non il s'agit en fait d'une NodeList, aucunes des méthodes de l'objet Array ne s'applique.

NodeList sur MDN
29/03/2014, 12h02
X260SH

D'accord, merci beaucoup !
Du coup, résolu.