2 questions : JS sur <option> et getElementsByClassName().style

29 août 2008, 00:46

Bonsoir tout le monde,

En plein développement d'une petite appli, 2 problèmes m'ammènent ici :

1. Est-il possible de lancer une fonction JS lorsque l'on passe sur une <option> d'un <select> ? Je connais déjà le onChange, mais je souhaiterai également lancer une fonction lorsque la souris passe sur l'option, mais ne l'a pas encore choisie.

2. Je crée un "colorPicker", dont voici le <div> :

Code : Tout sélectionner

<div class="colorPicker">
    	<?php
		foreach($colors as $key => $color) {
			echo '<div class="color" id="'.$color.'" style="background-color:'.$color.';" onclick="refreshColor(\''.$color.'\');"></div>';
		}
		?>
    	</div>

et la fonction refreshColor() qui se lance au onClick d'une couleur :

Code : Tout sélectionner

function refreshColor(color) {
	//document.getElementsByClassName('color').style.border = '1px solid #999999';
	document.getElementById(color).style.border = '1px solid black';
	document.getElementById('preview').style.color = color;
}

le <div> de chaque couleur possède une class, pour la mise en forme via CSS, et une id, pour pouvoir changer son border-color, dans ma fonction refreshColor().

Le problème vient de la ligne passée en commentaire, dans la fonction refreshColor(). Elle me renvoie l'erreur :

document.getElementsByClassName("color").style is undefined.

Si je comprends bien, on ne peut pas faire suivre document.getElementsByClassName de .style ?
Existe t'il un autre moyen de changer la couleur de la bordure d'un mon <div>, lorsque celui-ci n'est plus la couleur active ?

Merci d'avance.

29 août 2008, 02:02

//document.getElementsByClassName('color').style.border = '1px solid #999999';
document.getElementById(color).style.border = '1px solid black';

pourquoi dans le code en commentaires as-tu mis color entre simples quotes ' ?

Sinon pour info, pour formater un élément avec une autre classe, je procède d'une manière un peu différente :
document.getElementById("id").className = "autre_classe";

29 août 2008, 10:43

//document.getElementsByClassName('color').style.border = '1px solid #999999';
document.getElementById(color).style.border = '1px solid black';
pourquoi dans le code en commentaires as-tu mis color entre simples quotes ' ?

Parce que je cherche à toucher l'ensemble de mes carrés de couleur, pour leur remettre une bordure grise. c'est une classe commune à tous ces div, et non pas une id, comme celle que j'utilise sur la ligne d'en dessous, et dont je récupère la valeur dans la fonction JS.

Sinon pour info, pour formater un élément avec une autre classe, je procède d'une manière un peu différente :
document.getElementById("id").className = "autre_classe";

Je viens d'essayer

Code : Tout sélectionner

document.getElementsByClassName("color").className = 'color';

mais ça ne fonctionne pas. Je n'ai plus d'erreur, mais la bordure ne redevient pas grise. Pourtant :

Code : Tout sélectionner

.color {
display:inline-block;
border:1px solid #999999;

width:20px;
height:20px;

margin:2px;
cursor:pointer;
}

Comme si le

Code : Tout sélectionner

document.getElementById(color).style.border = '1px solid black';

envoyé précédemment prenait le dessus.

[Note : ce message a été posté de manière anonyme avant d'être réattribué à son auteur]

29 août 2008, 11:59

document.getElementsByClassName("color").className = 'color';

n'est pas

document.getElementById("id").className = "autre_classe";

29 août 2008, 12:10

document.getElementsByClassName("color").className = 'color';

n'est pas

document.getElementById("id").className = "autre_classe";

Je ne comprends pas bien.
Et je crois que je n'ai pas bien expliqué ce que je souhaitais faire. Voici 2 images, ça sera plus parlant :

Vu que je ne peux pas récupérer l'id de l'ancienne couleur pour lui remettre une bordure grise, je pensais remettre une bordure grise à l'ensemble des couleurs, pour ensuite appliquer une bordure noire sur la couleur sélectionnée.

Il existe une méthode plus simple ?

29 août 2008, 14:23

C'est une manière de faire en effet... mais "getElementsByClassName" renvoie un tableau d'éléments... tu dois donc boucler dessus pour initialiser toutes les cases puis modifier celle sélectionnée.

29 août 2008, 14:26

Il y'a une méthode plus simple:
Il faut mémoriser l'ancien objet couleur manipulé dans une variable javascript globale puis l'utiliser pour appliquer le style désactivé quand un nouvel objet est activé.

Voici un exemple :

Code : Tout sélectionner

<style>
 .non_actif {
        display:inline-block;
		border:1px solid #999999;

        width:20px;
        height:20px;

        margin:2px;
        cursor:pointer;
  }
 .actif {
		display:inline-block;
		border:1px solid #000000;

        width:20px;
        height:20px;

        margin:2px;
        cursor:pointer;
  }
  .afficheur {
  		width:100%;
		height:100%;
  }
</style>
<script type="text/javascript">
 var last_selected = null;
 function selectObjet( objet )
 {
    //désélectionner l'objet précédent (s'il y'en a)
    if (last_selected != null) 
    {
         last_selected.className = 'non_actif';
     }
     //sélectionner l'objet actuel
     if (objet != null)
     {
          objet.className = 'actif';
		  last_selected = objet;
     }
 }
 function paint( color )
 {
 	//Appliquer la couleur à un objet
	document.getElementById('afficheur').style.backgroundColor = color;
 }
</script>
<div class="non_actif" id="R" style="background-color:red;"   onclick="selectObjet(this); paint(this.style.backgroundColor)"></div>
<div class="non_actif" id="G" style="background-color:green;" onclick="selectObjet(this); paint(this.style.backgroundColor)"></div>
<div class="non_actif" id="B" style="background-color:blue;"  onclick="selectObjet(this); paint(this.style.backgroundColor)"></div>
<div class="afficheur" id="afficheur"></div>

Dans cet exemple, au clic sur une case de couleur, cette dernière est encadré en noir et la case précédemment sélectionnée perd son encadrement.
De plus un panneau d'affichage se voit coloré par la couleur choisie.

29 août 2008, 14:39

Après adaptation, ça marche :

Code : Tout sélectionner

function refreshColor(color) {
    //désélectionner l'objet précédent (s'il y'en a)
    if (last_selected != null)
         document.getElementById(last_selected).className = 'colorInactive';
     //sélectionner l'objet actuel
     if (color != null) {
		document.getElementById(color).className = 'colorActive';
        last_selected = color;
     }
	 
	 document.getElementById('preview').style.color = color;
  
}

Merci.

2 questions : JS sur <option> et getElementsByClassName().style

Qui est en ligne