My Javascript works on IE FF & Safari, but not Chrome
Question
I have a simple rotating banner javascript on the site I'm developing. It works perfectly locally, on IE, Firefox and Safari but not on Chrome. Is there something wrong with my code? I'm new to Javascript so this problem is really baffling me. Here's the relevant code:
<script language="Javascript" type="text/javascript">
adImages = new Array
("images/AMSite18.png","images/AMSite19.png","images/AMSite09b.png")
thisAd = 0
imgCt = adImages.length
function rotate() {
if (document.images) {
thisAd++
if (thisAd == imgCt) {
thisAd = 0
}
document.adBanner.src=adImages[thisAd]
setTimeout("rotate()", 3 * 1000)
}
}
</script>
</head>
<body onload="rotate()">
<div id="banner">
<img src="images/banner1.gif" name="adBanner" alt="Ad Banner" />
</div><!-- end banner -->
</body>
3 answers
solution1
4 2011-04-28 23:24:37
It looks like the reason it isn't working in Chrome is this line:
document.adBanner.src=adImages[thisAd]
You're referring to the element with the name "adBanner" via document.adBanner , but Chrome doesn't support that . You'll have to use something like this:
document.getElementsByName('adBanner')[0].src = adImages[thisAd];
Some others things that could improve code quality:
Don't use the
languageattribute. Not necessary.Use the format
var x = [...];to create a new array. There's no reason to use the constructor format. None at all. Zippo. No one could possibly comment on this answer with a reason you'd usenew Array(...)instead. No one.Use the
varkeyword to create variables, and the semi-colon to end your statements. Although it isn't hurting anything here, if you don't usevar, then JavaScript assumes you're creating/changing a global variable, when that may not necessarily be the case. (Also, the semi-colon rules may be a little convoluted, but it really helps with readability.)Why are you checking for
document.images? It's unnecessary. You don't refer to it anywhere else.Crockford suggests using
x += 1instead ofx++. Not a big deal, and a lot of people disagree, just something I noticed.Always use strict equality (===). The kind you're using (==) doesn't take into account types;
2 == "2"will return true, but2 === "2"will not. Again, not a big deal, and some people don't really care, but it could bite you later on, in a different project.Never pass strings to
setTimeout. The browser just evals the string, and nobody hangs out with people whoevalstuff. You don't even need to pass a string, because you're using a function that doesn't need any arguments: Just use this:setTimeout(rotate, 3 * 1000);Try to put script tags at the bottom of the body. There are two reasons for this. First, performance. When the browser gets to your script, it stops everything to parse and execute the code. If you put it at the bottom of the body instead of the head, the page will at least appear to load faster. The second point is addressed next:
Try to avoid using
onload. It's just gauche. The reason you need to is because your script is in the head, and has no access to the DOM just yet. But if that script was moved to the bottom of the body (which, for some reason, you might not be able to; no big deal), you wouldn't have to mess withonloadat all:<body> <div id="banner"> <img... /> </div> <script> // Copy all of your code exactly the same, // and then: rotate(); </script> </body>For the love of god, don't use the
nameattribute. For forms, who cares? But when you're manipulating elements with JavaScript, use the id. It's immediately obvious what you're doing, anddocument.getElementById('adBanner')is way faster thandocument.getElementsByName('adBanner')[0].
solution2
2 2011-04-28 23:18:09
You should start by fixing the syntax problems.
Lines should end with a semi-colon ; , variable should be declared with var and you should use [] rather than new array, pass a function to setTimeout rather than a string
var adImages = ['images/AMSite18.png','images/AMSite19.png','images/AMSite09b.png'];
var thisAd = 0;
var imgCt = adImages.length;
function rotate() {
if (document.images) {
thisAd++;
if (thisAd == imgCt) {
thisAd = 0;
}
document.adBanner.src=adImages[thisAd];
setTimeout(function(){
rotate();
}, 3 * 1000);
}
}
This may not fix it, but you you should do it anyway:)
solution3
1 2011-04-28 23:25:33
I just ran you code on Chrome 11 on a Mac and it worked. Even with the syntax errors. But Paul is right you should always write valid JavaScript.
Also this is a better way of passing functions
setTimeout(rotate, 3 * 1000);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.