HELP! JavaScript Code Alert Problems

M

MichiganMan

This is a program to just calculate a weekly gross salary based on the
hourly wage and hours worked (with overtime too). I am not getting the
alert box when it calculates it. Can anyone see what I might be doing
wrong? It is a smaller program so if someone could please help me
out!!


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html>
<head>
<title>Project 10-1</title>
<script type="text/javascript">
<!--HIDE FROM INCOMPATABLE BROWSERS

function grossSalaryCalc() {
if (document.wages.hoursWorked.value > 40) {
var overHours = hoursWorked -
40;
var overPay = overHours * 1.5 *
hourlyWage;
var grossPay = (hourlyWage * 40) +
overPay;
alert("Your weekly gross salary is " +
grossPay);
}
else {
var grossPay = hourlyWage * hoursWorked;
alert("Your weekly gross salary is " + grossPay);
}
}
//STOP HIDING FROM INCOMPATIBLE BROWSERS -->
</script>
</head>
<body>
<form name="wages" action="" method="get">
<p><label for="hoursWorked">Hours Worked</label>&nbsp;<input
type="text" name="hoursWorked" id="hoursWorked" /></p>
<p><label for="hourlyWage">Hourly Wage</label>&nbsp;<input type="text"
name="hourlyWage" id="hourlyWage" /></p>
<p><button type="button" onclick="grossSalaryCalc()">Calculate Gross
Salary</button>
</p>
</form>
</body>
</html>
 
M

MichiganMan

Thanks for the quick response. To declare a variable, I would just
put:
var hourlyWage
var hoursWorked

before the function and If Statement in the head section?
 
T

Tom Cole

Thanks for the quick response. To declare a variable, I would just
put:
var hourlyWage
var hoursWorked

before the function and If Statement in the head section?
Click to expand...

Yes, but you still have to assign them values...I assume you expect
these two variables to use their
repectively named textfields...

My guess is you would use something like

function grossSalaryCalc() {
try {
var hoursWorked = +document.wages.hoursWorked.value;
var hourlyWage = +document.wages.hourlyWage.value;
if (hoursWorked > 40) {
var overHours = hoursWorked - 40;
var overPay = overHours * 1.5 * hourlyWage;
var grossPay = (hourlyWage * 40) + overPay;
alert("Your weekly gross salary is " + grossPay);
}
else {
var grossPay = hourlyWage * hoursWorked;
alert("Your weekly gross salary is " + grossPay);
}
}
catch(e) {
alert("Please enter an hourly wage and hours worked.");
}
}
 
R

Richard Cornford

MichiganMan said:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html>
<head>
<title>Project 10-1</title>
<script type="text/javascript">
<!--HIDE FROM INCOMPATABLE BROWSERS
Click to expand...

It is permissible for an XML parse (XHTML is XML) to strip comments as it
is parsing the mark-up, so they do not come out of the other end. If that
happened here then your script element would become empty.

In any event, how many browser that understand XHTML at all do not know
how to handle a script element (regardless of whether they support
scripting or not)? This "hiding form older browsers" stuff has been
redundant in HTML documents since the late 1990's, it certainly does not
need to appear in an XHTML document.
function grossSalaryCalc() {
if (document.wages.hoursWorked.value > 40) {
Click to expand...
<snip>
You have not stated which browser you are getting to execute this code,
so we know little of the specifics of the XHTML DOM it is creating for
the document. However, XHTML DOMs tend to follow the DOM specifications
more strictly than HTML DOMs, and they often do not reproduce the
'shortcuts' common in HTML DOMs. This includes the 'shortcut' of
referencing form controls as named properties of the document object, or
form controls as named properties of the form element. Instead it is
advisable to use the formally specified - document.forms - collection to
reference form elements, and the from element's - elements - collection
to reference from controls.

On the other hand, what you have here may be only the illusion of XHTML,
and so none of the above applies, but then why use XHTML-style mark-up in
that case?

Richard.
 
M

MichiganMan

MichiganMan said the following on 3/19/2007 7:36 PM:


Thanks for quoting what you are replying to next time.


That would be one way. Personally, I would consult the URL I gave you
and set it something like this:

var hourlyWage = document.wages.hourlyWage.value;
Click to expand...

I placed this line of code in along with the hoursWorked to declare
the variables, and now I am finaly getting the alert message. But it
says "Your weekly gross salary is NaN? where whatever NaN is should
have been replaced with the grossPay variable. Any ideas?

I really appreciate your help, been working on this all day and I am
getting hung up on the final touches.
 
M

MichiganMan

I placed this line of code in along with the hoursWorked to declare
the variables, and now I am finaly getting the alert message. But it
says "Your weekly gross salary is NaN? where whatever NaN is should
have been replaced with the grossPay variable. Any ideas?
Click to expand...

I see now it means "Not a Number", but why isn't it seeing the
grossPay as a calculated number?

I really appreciate your help, been working on this all day and I am
getting hung up on the final touches.
 
R

RobG

I see now it means "Not a Number", but why isn't it seeing the
grossPay as a calculated number?
Click to expand...

Somewhere in your undisclosed code you are getting a result that is
not a number, usually by trying to do an arithmetic operation with
something that can't be type converted to a number.

The usual debugging trick is to use an alert to show the value of a
variable of interest. Insert it at a point where you are sure your
code is working, then move it down (or up) until the error is
revealed. Anyhow, try:

function grossSalaryCalc() {
var grossPay = 0;
var overPay = 0;
var f = document.forms['wages'];
var hoursWorked = +f.elements['hoursWorked'].value;
var hourlyWage = +f.elements['hourlyWage'].value;

if (hoursWorked > 40) {
overPay = (hoursWorked - 40) * 1.5 * hourlyWage;
hoursWorked = 40;
}

grossPay = hoursWorked * hourlyWage + overPay;
alert("Your weekly gross salary is " + grossPay);
}


The work you have left to do is:

- validate the input is suitable, presumably it should be only
valid decimal numbers, e.g. 12.5.
<URL:
http://groups.google.com.au/group/c...alidate+decimal+input&rnum=8#2d3269a1a18a24cf
- format your output as currency, e.g. $0.00 - see the FAQ:
<URL: http://www.jibbering.com/faq/#FAQ4_6 >
 
T

Tom Cole

try var hourlyWage = +document.wages.hourlyWage.value;

The + ensures that a conversion to a Number is happening and that you
don't try to do math on a String. You can also use
parseInt(document.wages.hourlyWage.value) or
parseFloat(document.wages.hourlyWage.value) if that suites you.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

JavaScript NaN Code Problem 3
Help with code 0
I dont get this. Please help me!! 2
Needs help in editing 14
Check forms With JavaScript 1
Help with my responsive home page 2
Need help with code on website (noob) 2
Song requests 4

Members online

No members online now.
Total: 24 (members: 0, guests: 24)
Robots: 440

Forum statistics

Threads
473,770
Messages
2,569,583
Members
45,074
Latest member
StanleyFra

Latest Threads

Top