Discussion :

[Lillie CHARLOTTE]

Bonjour,

Je débute en javaScript et J'aimerais appeler cette fonction javascript :

Code js :

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
34
35
36
function bordure(bouton){ 
  boutons=document.getElementsByTagName('td') 
  for (b=0;b<boutons.length;b++){ 
  if(boutons[b].className==bouton){ 
  boutons[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé 
  boutons[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché 
  boutons[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone 
  } 
  } 
  boutons=document.getElementsByTagName('div') 
  for (b=0;b<boutons.length;b++){ 
  if(boutons[b].className==bouton){ 
  boutons[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé 
  boutons[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché 
  boutons[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone 
  } 
  } 
  boutons=document.getElementsByTagName('a') 
  for (b=0;b<boutons.length;b++){ 
  if(boutons[b].className==bouton){ 
  boutons[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé 
  boutons[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché 
  boutons[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone 
  } 
  } 
  boutons=document.getElementsByTagName('img') 
  for (b=0;b<boutons.length;b++){ 
  if(boutons[b].className==bouton){ 
  boutons[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé 
  boutons[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché 
  boutons[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone 
  } 
 } 
 
} 
window.onload = function(){bordure('bouton')};

à partir de deux classe css différentes :

Code css :

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

1
2
3
4
5
.bouton { background:transparent; border:4px outset; border-radius: 0.625em; } 
div.bouton,a.bouton,img.bouton { border-color:white; padding:0.125em 0.25em;  }
 
.btnrub { background:transparent; border:4px outset; border-radius: 1em; } 
div.btnrub,a.btnrub,img.btnrub { border-color:white;}

Est-ce possible ?

Si oui avec quel avec quel contraintes et quel syntaxe ?

[Bovino]

Tu cherches quoi exactement ?
Appliquer ta fonction aux éléments possédant au moins une des classes, sur ceux ayant les deux ou sur une classe sachant que l'élément ciblé possède aussi une autre classe ?

[Lillie CHARLOTTE]

Bonjour Bovino,

Voici la page que je travaille:
http://ippai.free.fr/materiel-papiers.php

J'aimerais pouvoir utiliser 2 class de boutons en même temps sur la même page :
Sur les boutons de rubriques principale img, sans padding
et sur des boutons de sous rubrique href, avec un padding de 2 et 4px.

Et avoir l'animation inset outset sans bug.
Quand j'ai tenté de modifié le script, en remplaçant bouton par : bouton,btnrub
Les images des gros boutons se détachaient de la page, je n'ais donc pas due utiliser la bonne syntaxte !

[SylvainPV]

Simplement comme ça :

Code :

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

window.onload = function(){ bordure('bouton') bordure('btnrub'); };

Si tu es obligé d'appeler deux fois la fonction, ça vient de ta condition:
if(boutons[b].className==bouton){La fonction est prévue pour tester simplement la valeur de l'attribut "class". C'est pas pratique du tout car si on met juste une classe de plus (class="bouton truc" par exemple), même si elle n'a aucun rapport, le code ne fonctionnera plus. Mieux vaudrait utiliser if(boutons[b].classList.contains(bouton)){.

Pour ce genre de fonctions, utiliser jQuery simplifierait beaucoup de choses.

[Lillie CHARLOTTE]

Merci de ta réponse SylvainPV,

Du coups plus souple de rajouter un seconde fonction ?

Code JS :

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
34
35
36
37
38
39
40
41
42
43
44
45
46
function bordrub(btnrub){ 
   btnrubs=document.getElementsByTagName('img') 
  for (r=0;r<btnrubs.length;r++){ 
  if(btnrubs[r].className==btnrub){ 
  btnrubs[r].onmousedown=function(){this.style.borderStyle='inset';} //Activé 
  btnrubs[r].onmouseup=function(){this.style.borderStyle='outset';} //Relaché 
  btnrubs[r].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone 
  } 
 } 
 
function bordure(bouton){ 
  boutons=document.getElementsByTagName('td') 
  for (b=0;b<boutons.length;b++){ 
  if(boutons[b].className==bouton){ 
  boutons[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé 
  boutons[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché 
  boutons[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone 
  } 
  } 
  boutons=document.getElementsByTagName('div') 
  for (b=0;b<boutons.length;b++){ 
  if(boutons[b].className==bouton){ 
  boutons[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé 
  boutons[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché 
  boutons[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone 
  } 
  } 
  boutons=document.getElementsByTagName('a') 
  for (b=0;b<boutons.length;b++){ 
  if(boutons[b].className==bouton){ 
  boutons[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé 
  boutons[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché 
  boutons[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone 
  } 
  } 
  boutons=document.getElementsByTagName('img') 
  for (b=0;b<boutons.length;b++){ 
  if(boutons[b].className==bouton){ 
  boutons[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé 
  boutons[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché 
  boutons[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone 
  } 
 } 
 
} 
window.onload = function(){bordure('bouton'); bordrub('btnrub');  };

mais dans ce cas j'ai un joli bug sur les bouton image qui reste accroché au cursseur.

[Auteur]

bonjour,

un point important : déclare tes variables !

[Lillie CHARLOTTE]

Bonsoir Auteur,

C'est à dire ?

[Auteur]

Dans tes fonctions tu as plusieurs variables : r, boutons, btnrubs etc. déclare les avec le mot-clef var.

Code :

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

1
2
3
4
5
6
7
function bordrub(btnrub)
{ 
    var btnrubs, r; // déclaration des variables (variables locales car déclarées dans une fonction)
 
   // suite du code
 
}

Cela pourrait t'éviter de mauvaises surprises
Autre détail : je ne suis pas très fan des noms de variables qui ne diffèrent que d'une lettre : btnrubs et btnrub ou encore bouton et boutons. Pour des scripts plus longs, tu peux te mélanger les pinceaux.

[Lillie CHARLOTTE]

Merci de la remarque, mais du coups avoir 2 class dans un fonction *.js ça n'est pas très bon on dirait ?

[Auteur]

Tu peux mettre autant de fonctions (tu as des fonctions pas des classes dans ce code) que tu veux dans un fichier js.

Javascript n'est pas java : en java le fichier ne peut contenir qu'une classe et doit porter le nom de cette classe. En javascript, qui est un langage très différent de java, tu n'as pas cette contrainte.

[Lillie CHARLOTTE]

bouton et btnrub sont des class css dans mon *.js !

[SylvainPV]

Aucun rapport entre les classes CSS et les fonctions JavaScript, pour JavaScript ta classe CSS est une bête String rien de plus. C'est ta fonction qui est mal conçue, elle ne prend qu'une seule classe en argument donc aucune chance qu'elle en teste plusieurs en même temps.

Revois le passage d'arguments aux fonctions et l'utilisation des Arrays.

[Lillie CHARLOTTE]

C'est mieux comme ça ?

Code js :

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
34
35
36
37
38
39
40
function getBalises() { 
      ret  = new Array; 
 
      tds  = document.getElementsByTagName('td'); 
      for(i = 0 ; i < tds.length ; i++) { 
         ret[ret.length] = tds.item(i); 
      } 
 
      divs = document.getElementsByTagName('div'); 
      for(i = 0 ; i < divs.length ; i++) { 
         ret[ret.length] = divs.item(i); 
      } 
 
      as = document.getElementsByTagName('a'); 
      for(i = 0 ; i < as.length ; i++) { 
         ret[ret.length] = as.item(i); 
      } 
 
      imgs = document.getElementsByTagName('img'); 
      for(i = 0 ; i < imgs.length ; i++) { 
         ret[ret.length] = imgs.item(i); 
      } 
 
      return ret; 
   } 
 
function bordure(bouton) { 
  var boutons, b;
 
  boutons=getBalises(); 
 
  for (b=0;b<boutons.length;b++){ 
  if(boutons[b].className==bouton){ 
  boutons[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé 
  boutons[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché 
  boutons[b].onmouseout=function(){this.style.borderStyle='over';} //Hors zone 
  } 
 } 
} 
window.onload = function(){ bordure('bouton'); };

Code css :

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

1
2
3
.bouton { background:transparent; border:4px outset; border-color:white; } 
a.bouton,td.bouton { padding:0.125em 0.25em; border-radius: 0.625em; }
img.bouton,div.bouton { border-radius: 1em; }

J'ai simplifié le problème des deux styles différents en séparant:
les styles <a class="bouton" href"" /> et <td class="bouton"> avec padding et radius.
les styles <img class="bouton" src"" /> et <div class="bouton"> sans padding et avec un radius plus important.

.

[SylvainPV]

Non pas du tout c'est même bien pire qu'avant Ils sont si mauvais que ça les tutos arrays sur le net ?

déjà on déclare les arrays comme ça : var array=[];ensuite pour ajouter un élément, c'est la méthode push, pas l'affectation de l'index length (beurk): array.push(42)enfin je ne sais pas ce que tu as compris mais document.getElementsByTagName te renvoie déjà une collection, à quoi ça servait de faire tout ce bazar pour récupérer une array alors que tu savais déjà les parcourir avec une boucle for ? ça t'a pas paru bizarre ?

Je parlais d'utiliser les arrays pour passer la liste des classes à tester et t'éviter d'appeler deux fois ta fonction. Par exemple avec les méthodes map et join tu peux facilement produire une liste de sélecteurs avec toutes tes balises et toutes tes classes :

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
function bordure(classes, tags){   //classes est la liste des classes, tags la liste des balises
  var selecteurs = classes.map(function(classe){ 
     return tags.map(function(tag){
		return tag+"."+classe;
	}).join(", ")
  }).join(", ");
  var boutons = document.querySelectorAll(selecteurs);
  for (var b=0;b<boutons.length;b++){   
	  boutons[b].addEventListener("mousedown", function(){this.style.borderStyle='inset'; }); //Activé 
	  boutons[b].addEventListener("mouseup", function(){this.style.borderStyle='outset'; }); //Relaché 
	  boutons[b].addEventListener("mouseout", function(){this.style.borderStyle='outset'; }); //Hors zone 
  } 
 } 
 
 bordure(["bouton","btnrub"], ["td","div","a","img"]);

ce qui aurait pu aussi être fait à la main si tu n'avais pas une liste aussi énorme :

Code :

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

 var boutons = document.querySelectorAll("td.bouton, div.bouton, a.bouton, img.bouton, td.btnrub, div.btnrub, a.btnrub, img.btnrub");

Après j'ai répondu à ta question sur cette fonction mais entre nous, je ne comprends pas ce que fait cette fonction que CSS ne pourrait pas faire tout seul:

Code css :

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

1
2
3
 
.bouton, .btnrub { border-style: 'outset'; }
.bouton:active, .btnrub:active { border-style: 'inset'; }

[Lillie CHARLOTTE]

Non pas du tout c'est même bien pire qu'avant Ils sont si mauvais que ça les tutos arrays sur le net ?

C'est plutôt moi qui n'est pas douée pour trouver les informations !

déjà on déclare les arrays comme ça : var array=[];ensuite pour ajouter un élément, c'est la méthode push, pas l'affectation de l'index length (beurk): array.push(42)enfin je ne sais pas ce que tu as compris mais document.getElementsByTagName te renvoie déjà une collection, à quoi ça servait de faire tout ce bazar pour récupérer une array alors que tu savais déjà les parcourir avec une boucle for ? ça t'a pas paru bizarre ?

J'avoue ...

Je parlais d'utiliser les arrays pour passer la liste des classes à tester et t'éviter d'appeler deux fois ta fonction. Par exemple avec les méthodes map et join tu peux facilement produire une liste de sélecteurs avec toutes tes balises et toutes tes classes :

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
function bordure(classes, tags){   //classes est la liste des classes, tags la liste des balises
  var selecteurs = classes.map(function(classe){ 
     return tags.map(function(tag){
		return tag+"."+classe;
	}).join(", ")
  }).join(", ");
  var boutons = document.querySelectorAll(selecteurs);
  for (var b=0;b<boutons.length;b++){   
	  boutons[b].addEventListener("mousedown", function(){this.style.borderStyle='inset'; }); //Activé 
	  boutons[b].addEventListener("mouseup", function(){this.style.borderStyle='outset'; }); //Relaché 
	  boutons[b].addEventListener("mouseout", function(){this.style.borderStyle='outset'; }); //Hors zone 
  } 
 } 
 
 bordure(["bouton","btnrub"], ["td","div","a","img"]);

ce qui aurait pu aussi être fait à la main si tu n'avais pas une liste aussi énorme :

Code :

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

 var boutons = document.querySelectorAll("td.bouton, div.bouton, a.bouton, img.bouton, td.btnrub, div.btnrub, a.btnrub, img.btnrub");

Merci de cette solution, qui fonctionne à partir de Internet Explorer 9.

Après j'ai répondu à ta question sur cette fonction mais entre nous, je ne comprends pas ce que fait cette fonction que CSS ne pourrait pas faire tout seul:

Code css :

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

1
2
3
 
.bouton, .btnrub { border-style: 'outset'; }
.bouton:active, .btnrub:active { border-style: 'inset'; }

Justement, pour pallier le non fonctionnement de td.bouton:active en CSS avec Internet Explorer 5.5 6 7 et 8.

Mais depuis 2005, avec le recul je commence à me demander si je ne devrait pas me limiter à <img src""> et <a href=""> pour cette fonction comme me le faisait remarquer Kerod à l'époque !?

Donc oui, se simple code CSS ferait la même chose ...

Code css :

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

1
2
3
4
.bouton { background:transparent; border:4px outset; border-color:#D4D4D4; } 
.bouton:active { border:4px inset; border-color:#D4D4D4; } 
a.bouton,td.bouton { padding:0.125em 0.25em; border-radius: 0.625em; }
img.bouton,div.bouton { border-radius: 1em; }

Merci de toutes vos réponses !