Can't get script to multiply user input with hidden fields

[rush it]

I'm working on a water usage calculator for a client site. The water department superintendent of a small town wants residents to be able to enter the number of gallons of their swimming pool to find out how much more their water bill will be for that month. The user inputs the gallons, and that number is multiplied by a $2.61 water fee per 1000 gallons, and a $3.05 sewer fee per 1000 gallons. These last two fields are hidden, which I've not worked with before. The form displays fine and the Clear button works, but Calculate does nothing.

I'm brand new to javascript and am trying to round out my web developer skills but after a week and a half of research on this, I'm now up against the wall for a solution.

The client will updating any water fee changes and will not have access to ftp. I should add this is a Joomla! site.

Any ideas would greatly appreciated. Also, if anyone knows of an extensive online javascript library so I can keep learning, that would great also. Cheers.

My code:

<form name="water_calc" form action="" method="POST"><label>Enter number of gallons of water: </label>
 <input type="text" size="7" name="numGal" title="numGal" /> 
<span id="calc1"></span>
<input type="hidden" name="rate" title="Water Rate" value="2.61" /> 
<input type="hidden" name="sewRate" title="Sewer Rate" value="3.05" /> 
<label type="text" name="calc1" title="Total Fee"></label> 
<input type="button" id="calculate" name="calculate" value="Calculate" />
 <input type="reset" onclick="document.water_calc.reset()" value="Clear" name="Clear" title="Clear" /></form>

<script type="text/javascript">
var btn = document.getElementById('calculate');
btn.onclick = function() {
    var numGal = parseInt(document.getElementById('numGal').value);
    var rate = parseInt(document.getElementById('rate').value);
    var sewRate = parseInt(document.getElementById('sewRate').value);
    var calc1 = document.getElementById('calc1');
  calc1.value = numGal * (rate + sewRate) / 1000;
  
var msg = [];

    if (isNaN(val1)) {
        msg.push('This is not a number');
    }
    if (msg.length > 0) {
        calc1.innerHTML = msg.join(', ');
    } else {
        calc1.innerHTML = 'X x (Y + Z)/ 1000 = ' numGal * (rate * sewRate) / 1000;
	}
};
</script>

[Dormilich]

some notes
HTML line #6: <label>s don't have a name.
HTML line #8: the onclick is unnecessary, since type="reset" does exactly that.

JS:
- when do you execute that?
- are there any messages in the Error Console?

[Rabbit]

1) There is no variable called val1.
2) The length of msg will never be greater than 0.
3) You have not properly concatenated your string in the else statement.
4) You have attempted to access and bind the input control before the page has loaded.

[rush it]

I'm working on another project for now, but I'll come back to this topic and try the suggestions that have been posted, when I'm back on this project. Thanks.

[Rabbit]

Those weren't suggestions, there are at least four errors in the code and all four must be fixed before it can work.

[rush it]

Boy you guys on this board sure are touchy. Thanks for the "suggestion s", but it's been rewritten in php and works fine. Just have an associated Joomla issue to work on now. Next time I work with Javascript, I'll come back and look at this thread.