faire clignoter un texte

**laurentSc** · 23/02/2013, 11h58

Bonjour,

j'ai fait un code qui s'inspire de ce post : http://www.developpez.net/forums/d38...-balise-blink/, la seule différence étant que j'ai remplacé l'id par une classe, mais ça ne clignote pas. Pourquoi ?

Code html+javascript :

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
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>test1</title>
  <script language="javascript">
function cligno() {
if(document.getElementsByClass("cligno").style.visibility != 'hidden'){
document.getElementsByClass("cligno").style.visibility = 'hidden';
}
else{
document.getElementsByClass("cligno").style.visibility = 'visible';
}
}
var timer=setInterval("cligno()", 1000);
  </script>
</head>
<body>
<span class="cligno">HELLO</span>
</body>
</html>

**hackoofr** · 23/02/2013, 12h54

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
<html>
<head>
<script>
function blink(Obj)
{
if (Obj.style.visibility == "visible" )
{
Obj.style.visibility = "hidden";
}
else
{
Obj.style.visibility = "visible";
}
}
setInterval("blink(bl)",500);
</script>
</head>
<body>
<center><br><br><br>
<div id="bl" style="visibility:visible"><font size=+2 color=red>Texte Clignotant !!!</font></div>
</body>
</html>

un autre exemple de Texte-clignotant

**SpaceFrog** · 23/02/2013, 13h06

Deux causes probables

getElementsByClass n'existe pas ...
l'objet n'est pas instancié lorsque le script est appelé

**NoSmoking** · 23/02/2013, 13h52

Bonjour,
effectivement cette méthode ,document.getElementsByClass("cligno"), n'existe pas sauf si elle à été définie ce qui n'est pas le cas dans le code que tu fournis.

De plus le s dans getElementsByClass signifie que l'on récupères une liste donc il y a lieu d'accéder à un élément via un index.

On écrira donc var oElem = document.getElementsByClass("cligno")[ind].

Je rajouterais qu'il est plus propre d'écrire "var timer=setInterval("cligno()", 1000);" sous la forme var timer=setInterval( cligno, 1000);, en passant à la méthode setInterval la référence à la fonction.

Remarque très perso le mode blink peut devenir vite ~~à ch...~~ une horreur

.

**laurentSc** · 23/02/2013, 15h31

@SpaceFrog : avec un Id à la place de la Class, ça marchait, donc je pense que l'explication de l'élément pas encore existant ne tient pas ;

@ NoSmoking : Blink NAC (nul à ch...) certes, mais je réponds à un cahier des charges...Rajouter un indice (document.getElementsByClass("cligno")[ind]) ne change rien...;

@hackoofr : ton exemple marche si on attribut un id à l'élément, ce que j'arrivais déjà à faire, mais comme je voudrais faire plusieurs textes clignotants, j'aurais préféré créer une classe...

**NoSmoking** · 23/02/2013, 15h36

tu oublies l'essentiel

Envoyé par SpaceFrog

getElementsByClass n'existe pas ...

Envoyé par NoSmoking

effectivement cette méthode ,document.getElementsByClass("cligno"), n'existe pas sauf si elle à été définie ce qui n'est pas le cas dans le code que tu fournis.

**laurentSc** · 23/02/2013, 15h58

OK, mais comme tu as bien compris ce que je cherche à faire, comment ferais tu ?

**NoSmoking** · 23/02/2013, 16h23

J'ai déjà répondu

Envoyé par NoSmoking

Remarque très perso le mode blink peut devenir vite ~~à ch...~~ une horreur

.

donc je ne ferais pas

bon allez dans le cadre d'un bon voisinage

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
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>BLINK BLINK</title>
<script>
var oBlink = null;
function cligno(){
  // recup des éléments si pas encore fait
  oBlink = oBlink || document.getElementsByClassName("cligno");
  var i, nbr= oBlink.length;
  for( i=0; i < nbr; i++){
    // change visibility suivant le cas
    oBlink[i].style.visibility = oBlink[i].style.visibility == 'hidden' ? 'visible' : 'hidden';
  }
}
var timer=setInterval( cligno, 1000);
</script>
</head>
<body>
<span class="cligno" style="visibility:hidden">EN HAUT</span><br>
<span class="cligno">EN BAS</span>
</body>
</html>