Problema con setInterval

Luis10 · #1 (**permalink**) 16/04/2010, 05:27

Buenas!

Tengo 3 div´s en mi código, uno tiene su display a "block" para que se vea y los otros a "none", y quiero hacer una función en js para que vaya cambiando el display de los div´s sucesivamente transcurrido un período de tiempo, el código es el siguiente:

Código PHP:

  function cambiarImg( ){ 
//alert(i);     
if (i==0){     
document.getElementById("n1").style.display="block"; 
document.getElementById("n2").style.display="none"; 
document.getElementById("n3").style.display="none"; 
i++; 
//alert("n1"+i); 
} 
if (i==1){     
document.getElementById("n1").style.display="none"; 
document.getElementById("n2").style.display="block"; 
document.getElementById("n3").style.display="none"; 
i++; 
//alert("n2"+i); 
} 
if (i==2){     
document.getElementById("n1").style.display="none"; 
document.getElementById("n2").style.display="none"; 
document.getElementById("n3").style.display="block"; 
i=0; 
//alert("n3"+i); 
} 
} 
timer=setInterval("cambiarImg()", 5000);

El problema es q solo m rota bién si tengo los alert activados, sino no...es algo muy raro y no entiendo porque, en la consola de errores no me sale error js alguno.
Como podría hacer q funcione correctamente sin tener q activar los alerts??

Un saludo!

Adler · #2 (**permalink**) 16/04/2010, 07:03

Hola

Prueba así

Código Javascript:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
window.onload = function() {
contador = 0;
var f = function() {
    document.getElementById('Menu'+contador).style.visibility = (document.getElementById('Menu'+contador).style.visibility === 'hidden') ? 'visible' : 'hidden'; 
if(contador == 2) {contador = -1;}
    document.getElementById('Menu'+parseInt(contador+1)).style.visibility = (document.getElementById('Menu'+parseInt(contador+1)).style.visibility === 'hidden') ? 'visible' : 'hidden'; 
contador += 1;
}
setInterval(f, 5000);
}
</script>
</head>
<body>
<div id="Menu0" style="visibility:visible;position:absolute;background:blue">Contenido 1</div>
<div id="Menu1" style="visibility:hidden;position:absolute;background:red">Contenido 2</div>
<div id="Menu2" style="visibility:hidden;position:absolute;background:yellow">Contenido 3</div>
</body>
</html>

Suerte

posman · #3 (**permalink**) 16/04/2010, 07:59

Solo veo un error: dentro de cada IF estas incrementando el contador i. Esto hace que el siguiente IF sea verdadero y tambien entra.

Código javascript:

Ver originalif (i==0) { //la primera vez si se entra aqui
  ...
  i++; //ahora i es igual a 1
}
if (i==1) { //si se entra aqui ya que i es igual a 1
  ...
  i++; // i = 2
}
if (i==2) { //si se entra porque i si es igual a 2
  ..
  i = 0;
}

Podrias poner un return en cada IF, despues de que actualizas el valor del contador

Luis10 · #4 (**permalink**) 18/04/2010, 04:28

Muchas gracias!! era un fallo de programación como has comentado. Me faltaban los return...

Un saludo