0

Why won't this short example work? I am trying to get a total calculated on the fly, but it seems the function's aren't updating the total box.

In my actual work I am using radio buttons to update the pricing on the fly (rather than the button shown here), which each have an onclick function applied.

http://jsfiddle.net/jvEDt/1/

Any help would be amazing! Thanks very much

Your order total: <input type="text" id="totalbox" name="totalbox" size="10" maxlength="10" readonly="readonly" value="0.00" /><br>

<input name="Order" type="submit" value="Order" onclick ="JavaScript: calculateTotal();">

function calculateTotal()
{
var total = "5.00";
var totalbox = document.getElementById('totalbox');
totalbox.value = "£" + total;
}
SGPascoe
  • 33
  • 8

3 Answers3

1

There are different settings in jsFiddle how the javascript should be treated.

onLoad
This executes the script when the body has loaded:

<body onLoad="<your script>">

No wrap - in head
This inserts the script in the head section:

<head>
  Your script
</head>

In your case you don't want to execute the script but rather include it on the page so that it's globally available. No wrap - in head is the setting you should use.

Sani Huttunen
  • 23,620
  • 6
  • 72
  • 79
0

You can define your function at run-time:

calculateTotal = function()
{
    // your code
}

Or you can change the place Javascript is loaded in the jsfiddle to No wrap as said in other answers.

Check this thread about run-time and parse-time defined functions: var functionName = function() {} vs function functionName() {}

Community
  • 1
  • 1
albertedevigo
  • 18,262
  • 6
  • 52
  • 58
0

additionaly:

<input name="Order" type="button" value="Order" onclick="calculateTotal();">

No spaces, no JavaScript: etc.

Axel Amthor
  • 10,980
  • 1
  • 25
  • 44