Problem With Rollover Script

[therschbach]

Hi all, I have an index page at www.dirtjournal.com that has a menu bar with button images with id's button0 through button9. Next to the buttons I have corresponding images with id's coin0 through coin9, one for each button, that I want to change to an animated image when I rollover the corresponding button. Well, it doesn't work. I've narrowed down the problem but I'm just learning so I'm sure it's a simple fix. The index.php page links to this javascript file....

window.onload = initAll;function initAll() {  for (i=0; i < 10; i++) {	setupRollover(i);  }} function setupRollover(i) {  document.getElementById('button' + i).onmouseover = coinStart(i);  document.getElementById('button' + i).onmouseout = coinStop(i);}function coinStart(i) {  document.getElementById('coin' + i).src = "./pictures/rotatingcoin.gif";}function coinStop(i) {  document.getElementById('coin' + i).src = "./pictures/coin.gif";}

The variable "i" passes to the setupRollover function and plugs itself into ('button' + i), but it won't pass itself to the coinStart or coinStop functions. I can manually set the coin ID in those functions and delete the (i) from the function calls and it will work for whatever image I specify so I know the coinStart and coinStop functions work. The problem seems to be with how I'm passing (i) to coinStart and coinStop in the setupRollover function.Thanks for your help!

[jesh]

Your code is passing the result of the "coinStart" and "coinStop" functions (which is void) to the onmouseover and onmouseout events. Instead, you'll need to pass a reference to a function. Something like this might work for you:

function setupRollover(i) {  document.getElementById('button' + i).onmouseover = function() { coinStart(i); }  document.getElementById('button' + i).onmouseout = function() { coinStop(i); }}

[therschbach]

Ok, that makes sense. I figured it was something like that. I'll give the change a shot when I get home from work. Thanks!

Your code is passing the result of the "coinStart" and "coinStop" functions (which is void) to the onmouseover and onmouseout events. Instead, you'll need to pass a reference to a function. Something like this might work for you:

function setupRollover(i) {  document.getElementById('button' + i).onmouseover = function() { coinStart(i); }  document.getElementById('button' + i).onmouseout = function() { coinStop(i); }}

[jeffman]

You're going to get burned on this, like most of us have. In function() { coinStart(i); } , i doesn't mean what you think it does. Try it. If it's broken, you'll need to use the this keyword inside the anonymous function. It will refer to the button element. Access its id and extract the index from that, using substr or something. Pass that value to coinStart().

[jesh]

You're going to get burned on this, like most of us have.

True, this is all a bit confusing at first and I've been burned by it a number of times, but, in this case, it's not really a problem.This will not act like most people would expect it to (i.e. do it this way and you get burned):

<script type="text/javascript">for (var i = 0; i < 10; i++){	var button = document.createElement("button");	button.id = "button" + i;	button.onclick = function() {someOtherFunction(i);}	button.innerHTML = "button" + i;	document.body.appendChild(button);}function someOtherFunction(i){	document.getElementById("output").innerHTML = "You clicked button " + i;}</script><div id="output"></div>

This way, however, works just fine:

<script type="text/javascript">for (var i = 0; i < 10; i++){	buildButton(i);}function buildButton(i){	var button = document.createElement("button");	button.id = "button" + i;	button.onclick = function() {someOtherFunction(i);}	button.innerHTML = "button" + i;	document.body.appendChild(button);}function someOtherFunction(i){	document.getElementById("output").innerHTML = "You clicked button " + i;}</script><div id="output"></div>

[jeffman]

Yeah, maybe I should have looked back a few posts.

[therschbach]

It works!!!! Yeah! Thanks a bunch jesh. I'm sure I'll be back as I continue to add some more functionality to the site.

This way, however, works just fine:

<script type="text/javascript">for (var i = 0; i < 10; i++){	buildButton(i);}function buildButton(i){	var button = document.createElement("button");	button.id = "button" + i;	button.onclick = function() {someOtherFunction(i);}	button.innerHTML = "button" + i;	document.body.appendChild(button);}function someOtherFunction(i){	document.getElementById("output").innerHTML = "You clicked button " + i;}</script><div id="output"></div>