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

**X260SH** · 24/03/2014, 22h37

Ouais, mais... Enfin, je ne comprends pas. Comment sont nommés les élement retourner par getElementsByTagName ?

**xoorus** · 25/03/2014, 10h02

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

**X260SH** · 25/03/2014, 16h57

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.

**Bovino** · 25/03/2014, 17h13

Et depuis hier soir, tu n'as pas été capable de taper getElementsByTagName dans Google pour te renseigner ?

**X260SH** · 25/03/2014, 18h23

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

**xoorus** · 26/03/2014, 09h21

J'ai ici un exemple :

Code :

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

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

**Golgotha** · 27/03/2014, 10h30

X260SH, tu t'en sort ?

**X260SH** · 27/03/2014, 21h30

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

**Golgotha** · 28/03/2014, 09h48

Voici un explication détaillé.

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

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

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 ?

**X260SH** · 28/03/2014, 17h10

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 !