setInterval()

**van___fanel** · 06/10/2008, 13h53

Bonjour,

j'ai un petit problème avec une boucle sur un getElementsByClassName().

J'ai une fonction, que voici :

Code :

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

1
2
3
4
5
6
7
8
function rollNews() {
	//alert(document.getElementById('newsContent').getElementsByClassName('news').length);
	var cursor = 0;
	for(var i = 0; i <= document.getElementById('newsContent').getElementsByClassName('news').length; i++) {
		document.getElementById('newsContent').getElementsByClassName('news')[i].style.display = 'none';
	}
	//document.getElementById('newsContent').getElementsByClassName('news')[cursor].style.display = 'block';
}

qui va intéragir sur l'HTML suivant :

Code :

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

1
2
3
4
5
6
7
8
<div class="actualites">
	<div class="title"></div>
    <div class="content" id="newsContent">
    <p class="news">Les solutions pour d&eacute;crocher les meilleurs cr&eacute;dits. Pour faire plier les banques, qui pr&ecirc;tent de...</p>
    <p class="news">Test 2</p>
    </div>
    <div class="more"></div>
</div>

Lancée par un onload sur le <body>, elle me renvoie l'erreur :

document.getElementById('newsContent').getElementsByClassName('news')[i] is undefined

Ce qui est étrange, c'est que quand je fait un

Code :

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

alert(document.getElementById('newsContent').getElementsByClassName('news')[0].innerHTML);

la fonction me renvoie bien le contenu de la première news.

Comment ce fait'il que la fonction n'arrive pas à interpréter correctement la variable i, dans ma boucle ?

**bigboomshakala** · 06/10/2008, 13h56

mauvais test

Code :

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

for(var i = 0; i <= document.getElementById('newsContent').getElementsByClassName('news').length; i++)

bon test

Code :

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

for(var i = 0; i < document.getElementById('newsContent').getElementsByClassName('news').length; i++)

meilleur code

Code :

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

1
2
var tab = document.getElementById('newsContent').getElementsByClassName('news');
for(var i = 0; i < tab.length; i++)

**van___fanel** · 06/10/2008, 17h18

Effectivement, ça marche mieux. je pensais que comme PHP, Javascript comprenait les signes <= et >= .

Un

<= var

en javascript se transforme donc en

< var +1

j'imagine.

Merci en tout cas.

**E.Bzz** · 06/10/2008, 17h43

Bonjour,

Envoyé par van___fanel

Effectivement, ça marche mieux. je pensais que comme PHP, Javascript comprenait les signes <= et >= .

le problème n'est pas celui-là.
JS comprend <= et >=
Ce que te signale bigboomshakala, c'est que le dernier indice d'un tableau est length-1 (et non pas length)

A+

**van___fanel** · 06/10/2008, 19h09

Effectivement.

Je suis maintenant en train d'utiliser ma boucle dans une fonction, dont le but ultime est de réussir à reproduire le système de news défilante placé juste en dessous de la bannière du site http://www.credixia.com/

Voici mon code HTML :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="actualites">
	<div class="title"></div>
    <div class="content" id="newsContent">
    <p class="news">Les solutions pour d&eacute;crocher les meilleurs cr&eacute;dits. Pour faire plier les banques, qui pr&ecirc;tent de...</p>
    <p class="news">Test 2</p>
    </div>
    <div class="more"></div>
</div>
 
<div id="debug"></div>
<script type="text/javascript" language="javascript">
rollNews('0');
</script>

et ma fonction rollNews() :

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
function rollNews(news) {
	var elem = document.getElementsByClassName('news');
	var i = 0;
	for(i = 0; i < elem.length; i++) {
		elem[i].style.display = 'none';
	}
	//document.getElementById('debug').innerHTML = 'on affiche la news #'+news+'<br />';
	elem[news].style.display = 'block';
 
	news = parseInt(news) + 1;
	if(news >= elem.length) {
		news = 0;
	}
 
	//document.getElementById('debug').innerHTML += 'on lance rollNews(\''+news+'\')<br />';
	window.setInterval("rollNews('"+news+"')", 5000)
}

Ca marche pas trop mal pour le moment, sauf que parfois ça bug un peu, on dirait que le script lance deux fois de suite la fonction, sans attendre intervalle de 5 secondes. Et bout d'un certains temps (une dizaine d'intervalles je dirais, ça bug complètement, et plus rien ne bouge, et Firefox plante). Une idée d'où ça peut venir ?

**E.Bzz** · 07/10/2008, 09h37

Avec cette ligne

Code :

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

window.setInterval("rollNews('"+news+"')", 5000)

tu lances plusieurs setInterval() en parralèlle : l'appel étant à l'intérieur de la fonction, elle se rappelle elle-même.
Dans ce cas, il faut utiliser un simple setTimeout() qui ne lance qu'une fois l'instruction au bout du délai (même syntaxe que setInterval() )...

Sinon, tu peux continuer à utiliser setInterval(), mais en le sortant de la fonction. Tu peux appeler cette instruction sur le onload du body, par exemple (ce serait préférable à

Code :

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

1
2
3
<script type="text/javascript" language="javascript">
rollNews('0');
</script>

) ...

A+

setInterval()

JavaScript

Vue hybride

Discussions similaires

Partager

Partager