Why does the function on my button not work?

Question

I am writing a form to get data from boxes and do a calculation when the "Calculate" button is clicked. The button does the calculation through the function cal(), but it cannot display the result in the countfield box. How the display the result in the box? Also, how the name the function with "-"?

<script type="text/javascript">
function cal()
{
   var hour = document.getElementById( "hourfield" ).value;
   var fee = document.getElementById( "feefield" ).value;
   var count = document.getElementById( "countfield" ).value;
   count = hour + fee;
}
</script>

Answer 1

Try this:

<script type="text/javascript">
function cal()
{
var hour = parseInt(document.getElementById( "hourfield" ).value);
var fee = parseInt(document.getElementById( "feefield" ).value);

document.getElementById( "countfield" ).value = hour + fee;
}
</script>

Answer 2

Change the following:

var count = document.getElementById( "countfield" ).value;
count = hour + fee;

to:

document.getElementById( "countfield" ).value = hour + fee;

That's because any asignment to the count variable just changes it's reference and not the field in the form. And you cannot have "-" in the name, but you can use "_" or word "minus".

Answer 3

You need to assign count to countfield like this:

document.getElementById("countfield").value= count;