Button onClick event works great in IE but not in Safari/FF, can anyone help?

darkus

05-14-2009, 01:31 AM

I've spend about 2 days writing this javascript code and it works great in IE only to find out that it does nothing in Safari/FF. After smashing my head into a wall for a few hours I decided to ask for some help

Here is my code:

<script type="text/javascript">function calculate() {

var thetotal = 0;
var silver = 0;
var gold = 0;

var banners = 0;

var pname01 = document.getElementById("pname01").value;

if (pname01 == "Silver") { silver = silver + 1;}
if (pname01 == "Gold") { gold = gold + 1;}
}

var ptime = document.getElementById("ptime").value;

if (ptime == 3) { mos = 1; }
if (ptime == 4) { mos = 3; }
if (ptime == 5) { mos = 6; }
if (ptime == 6) { mos = 12; }

if (silver > 0) { silverinit = 1; } else { silverinit = 0; }
if (gold > 0) { goldinit = 1; } else { goldinit = 0; }

silverupgrade = silver - 1;
goldupgrade = gold - 1;

if (gold > 1) { golddiscount = (gold - 1) * 12 } else { golddiscount = 0; }

if (silverupgrade < 0) { silverupgrade = 0; }
if (goldupgrade < 0) { goldupgrade = 0; }

if ((silverinit == 1) && (goldinit == 1)) { silverinit = 0; silverupgrade = silverupgrade + 1; }

thetotal = ((silverinit * 18) + (silverupgrade * 8)) + ((goldinit * 32) + (goldupgrade * 18) - golddiscount);

thetotal = thetotal * mos;

thetotal = "$" + thetotal;

document.getElementById("thetotal").value = thetotal;
}</script>

<form>
.... a bunch of form elements

<button type="button" value="button" onclick="calculate();" style="background-color: yellow; border:1px solid #aaa;">Calculate</button>
Total: <input type="text" id="thetotal" onfocus="this.blur();" />

</form>

Basicly what the script does is using some variables in my form will calculate a total price in real time when you click the "Calculate" button. Works great in IE, but in Firefox/Safari it won't do a thing..

thanks for any help!

adios

05-14-2009, 02:55 AM

Try using

<input type="button" ...

Couldn't hurt. Also, declare all vars (like 'mos') at the beginning of that function, so they're local to it. Nothing else jumps out. Type javascript: into the location field (FF), select 'errors' and then clear them, then run the routine again. Check to see if anything comes up.

auslin

05-14-2009, 04:17 AM

There seems to be an extra closing bracket in the function - the one just before the variable ptime is declared, on line 9. This is closing off the function block too soon. All of the JavaScript here should be inside the function. This would be the major problem here, although I don't see how it would still be working in IE, with the given code.

Also, there is that unknown variable 'mos' being used near the end of the script. I tried it with mos set to 1, and with a couple of assumed form input elements, and it seems to work OK in FF, once the bracket problem is fixed.

adios

05-14-2009, 05:25 AM

That's really interesting, auslin, didn't even catch that. That should not run in IE with a syntax error; in addition, if the script is in the head, it'll fail on that immediate use of document.getElementById. But there certainly is a function-ending brace in there if (pname01 == "Gold") { gold = gold + 1;}
} ... and an extra one at the end.

'mos' is defined by assignment (above) and global. Sloppy, but works.

darkus

05-14-2009, 12:29 PM

Sorry about that extra bracket. This code was modified for this post because it actually is embedded inside a PHP file which will throw in a few variables through a loop, so that bracket is from my PHP code that I didn't remove when I made this post.

So this code that I posted up (minus that bracket) is working for you guys in FF/Safari? I dont understand what crazyness i'm doing :)

darkus

05-14-2009, 01:05 PM

I just threw in a document.write ('test'); at the top of my script above the global variable declarations and in IE it will clear the screen and write test. In Safari/FF it will clear the screen so I'm assuming that the script is actually getting fired by the input button but it doesn't write the word test on the screen, I've tried it in both Chrome and Firefox with the same result... not sure what to make of that.

BTW, this script is placed inside the <body> of my file and not the <head> incase that makes any difference

thanks!

adios

05-14-2009, 06:19 PM

Could you post the entire page, a reasonable facsimile, or a url? Would help a lot.

Never use document.write for testing purposes. It generally discards the current document, causing more problems than it solves. Pop up a box for quick on-the-fly debugging.

Philip M

05-14-2009, 07:08 PM

The script works fine for me in both IE and FF.

For testing I made the following changes:-

// var pname01 = document.getElementById("pname01").value;
var pname01 = "Gold";

//var ptime = document.getElementById("ptime").value;
var ptime = 6;

and both browsers give the result as $384.

document.getElementById("thetotal").value = thetotal;
It is not a good idea to give the same name or id to a (global) Javascript variable as an HTML element, but it still works here as the variable is local. Deprecated, though.

darkus

05-14-2009, 11:48 PM

Thanks for the help everyone, the problem was just an issue of the name= and id= in the actual form elements as Philip alluded too. Once I corrected that everything is working on all browsers.

thanks again everyone for their contribution to getting this working!!