[thelist] onClick issue with buttons? JavaScript issue?

Tom Dell'Aringa pixelmech at yahoo.com
Thu Jan 12 10:40:07 CST 2006


Hi folks,
 
I have this drummed up version of images we are using as buttons for a kiosk (LONG story). They work to a point, but they show some odd behavior. First take a look at them:
 
http://pixelmech.com/rev/buttons.html
 
Now clicking from one to another, they toggle just fine. However, clicking one single button repeatedly seems to take TWO clicks to change its' state if you click fast enough. If you click slowly (wait a count of 1 in between) it works fine. If you click back and forth between the two, again its fine.
 
Strangely, it behaves much better online than locally. Locally it is really obvious that you have to click twice - almost like the state has not been changed even though I think I am successfully doing so.
 
Is this a limitation of the onClick event handler possibly? Am I too worried about fast clicks?! :) (Although you can go fairly slowly and get the behavior locally - especially on the touchscreen kiosk). If there is an error in my JS, I am too obtuse to see it. 
 
The reason I'm not using an input type=image is I don't want the button to submit (i.e., don't want to have to suppress it each time) and swapping the bg image on a button is proving trickier than what I've done here. Anyone have any suggestions? Below is the JS and the button:
 
function kButtonBool(oButton)
{
 // read src string into an array
 var srcArray = oButton.src.split("/");
 
 // the image is the last item in the array
 var img = srcArray[srcArray.length - 1];
 
 // is this the "on" image?
 var imgon = img.search(/_on/);
 
 // toggle image state
 var curr = (imgon >= 0) ? "" : "_on" ;
 var srcString = "images/" + oButton.id + curr + ".gif";
 oButton.src = srcString;
 
 // get hidden button and set its value
 hiddenName = oButton.id + "_value";
 hiddenVal = (curr == "_on") ? 1 : 0 ;
 butHidden = document.getElementById(hiddenName);
 butHidden.value = hiddenVal;
}
 
<img src="images/testbutton.gif" width="261" height="73" alt="button" id="testbutton" class="kbut" onclick="kButtonBool(this)" border="0" />
<input type="hidden" id="testbutton_value" value="0" />
 
Any help is greatly appreciated!
 
Tom
 
 


More information about the thelist mailing list