2010-01-11 5 views
0

J'essaie d'écrire une simple fonction JS qui fait tourner l'image de fond d'un bloc CSS par seconde d'une manière aléatoire. Je veux ajouter le nom du bloc et le nombre d'images des paramètres, afin que la fonction puisse être aussi flexible que possible et que je puisse appeler plusieurs instances sur une seule page. Le problème est que j'obtiens 'nameofparamter undefined' Erreur.Pourquoi un paramètre d'une fonction JavaScript renvoie-t-il undefined?

Voici le script avec le code HTML

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hu-HU" lang="hu"> 
<head> 
<meta name="http-equiv" content="text/html; charset="utf-8""> 
<meta name="description" content="leiras"><meta name="keywords" content="kulcsszavak"/> 
<style type="text/css"> 
div#mycontainer{ 
background-image: url(images/bg_image1.jpg); 
width: 800px; 
height: 600px; 
} 
</style> 
<script type="text/javascript" charset="utf-8"> 
function changeBgImage(num, el){ 
    var imageNum = num; 
    var randomImageNum = Math.ceil(Math.random()*imageNum); 

    if(el!=='null'){ 
     el.style.backgroundImage='url(images/bg_image'+randomImageNum+'.jpg'; 
      var timer = setTimeout("changeBgImage(num, el)", 1000); 
    } 
} 

</script> 
</head> 
<title>Dynamic Backgroundimage changer</title> 
<body onload="changeBgImage(4, document.getElementById('mycontainer'));"> 
<div id="mycontainer"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut felis purus, dictum quis pellentesque ut, venenatis et tellus. Phasellus gravida cursus urna, quis hendrerit risus rutrum vel. Suspendisse dictum lobortis molestie. Sed quis lacus nec ante dignissim sollicitudin. Curabitur tristique facilisis turpis. 
</div> 
</body> 
</html> 

Je ne comprends pas vraiment parce qu'il ya la valeur itérée des deux paramètres dans le gestionnaire d'événements onload du corps où j'appelle la fonction? Alors pourquoi undefined? Votre aide est la bienvenue! :)

Répondre

1

changement

setTimeout("changeBgImage(num, el)", 1000); 

à

setTimeout(function() { changeBgImage(num, el) }, 1000); 
1

Ceci est une supposition, mais tout d'abord parce que votre appel à la fonction entre guillemets, il l'invoque dans le contexte mondial et num et el ne sont pas définis dans un contexte global, mais dans votre fonction. Essayez d'utiliser une fonction littérale, par exemple

setTimeout(function() { changeBgImage(num, el) }, 1000); 

PS, vous devriez utiliser != null pas la chaîne vide.

5

Il y a un tas de choses qui ne vont pas avec votre code. D'une part, votre vérification null vérifie seulement que la variable n'a pas une valeur de chaîne qui est exactement 'null'. Lorsque vous définissez la propriété backgroundImage, la chaîne que vous attribuez a des parenthèses inégalées.

Mais surtout, setTimeout s'exécute sur le contexte window, où vos variables ne sont pas disponibles (et vous ne voulez pas qu'elles le soient). Au lieu de cela, changer votre appel à

setTimeout(function() { changeBgImage(num, el) }, 1000); 

donc une solution complète serait

if(el){ 
    el.style.backgroundImage='url(images/bg_image'+randomImageNum+'.jpg);'; 
    var timer = setTimeout(function() { changeBgImage(num, el) }, 1000); 
} 
+0

Cela provoque chaque seconde une nouvelle fermeture générée, ce qui conduit à une fuite de mémoire dans IE – alemjerus

+0

@alemjerus pouvez-vous poster un screeny de vos graphiques d'utilisation de la mémoire? – Breton

0

Lorsque vous appelez une fonction avec setTimeout vous ne pouvez pas passer des objets en tant que paramètres. Donc, je vous recommande d'aborder le problème d'une autre manière. Vous pouvez avoir des variables partagées pour transmettre les arguments.

Questions connexes