[thelist] [JavaScript] way around these global vars?

marcus m-lists at bristav.se
Sun Feb 12 16:47:51 CST 2006


Hmmm... little bit to fast there. You'll need some way of breaking out 
of the loop as well (since the code right now will loop forever)

/Marcus

marcus skrev:
> Little late into the discussion...
> 
> If you just want to get rid of the global vars you could just replace 
> your setTimeout with:
> 
> setTimeout(function() {  showHit(btn); }, 500);
> 
> Then you can remove some of the code I think (not just the global vars)
> 
> Result:
> function showHit(btn)
> {
>      var urlArray = btn.style.backgroundImage.split("/");
>      var img = urlArray[urlArray.length -1].replace(".gif)", "");
>      var on = "url(/images/" + img + "_on" + ".gif)";
>      btn.style.backgroundImage = on;
>      setTimeout(function() {  showHit(btn); }, 500);
> }
> 
> Not tested though. I think this is simpler than the OO solution proposed 
>   to keep the state internal (where you end up with a if-else that's not 
> needed)
> 
> /Marcus
> 
> Tom Dell'Aringa skrev:
>> Hi folks,
>>
>> Still working on my kiosk project and I'm wanting to make hit states for my buttons. The buttons
>> look like this:
>>
>> <input type="submit" name="viewall" style="border: 0; background: #fff; background-image:
>> url(/images/btn-viewall.gif); width: 300px; height: 75px;" value="" onclick="showHit(this);">
>>
>> Yeah, it's ugly and the local style blows, but that's the way it has to be for right now. In any
>> event, I've written this little showHit() function attached to the onclick to give the user a
>> little feedback that yeah, you did hit the button and it did register. It sends itself as the only
>> argument. See below:
>> --------------------------------------------------------------------------
>> var lastImg;
>> var currentBtn;
>> function showHit(btn)
>> {
>>     if(!btn)
>>     {
>>         currentBtn.style.backgroundImage = "url(/images/" +lastImg+ ".gif)";
>>         return;
>>     }
>>     else
>>     {
>>         var urlArray = btn.style.backgroundImage.split("/");
>>         var img = urlArray[urlArray.length -1].replace(".gif)", "");
>>         var on = "url(/images/" + img + "_on" + ".gif)";
>>         lastImg = img;
>>         currentBtn = btn;
>>         btn.style.backgroundImage = on;
>>         setTimeout("showHit()", 500)
>>     }
>> }
>> ----------------------------------------------------------------------
>> So it tears the background string apart, grabs the image name, adds '_on' for the onstate, then
>> calls itself a half second later and puts the old image back. It works fine, but I don't like the
>> global vars and I'm wondering how I can get around using them. 
>>
>> When I tried to send the button object/img name via setTimeout() recursively, they are out of
>> scope, so that does not work. 
>>
>> Any ideas? Feel like I might be missing something obvious.
>>
>> Thanks
>>
>> Tom
>>
>> http://www.pixelmech.com/
>> http://www.crossandthrone.com/
>>
>>
>> Professor Rumford: 'But I still don't understand about hyperspace.' 
>> The Doctor: 'Well, who does?' 
>> K9: 'I do.' 
>> Doctor: 'Shut up, K9!' 
>>
>>
> 




More information about the thelist mailing list