13 Replies - 788 Views - Last Post: 10 November 2011 - 06:51 PM

#1 kashally  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 09-November 11

How to make this return an answer?

Posted 09 November 2011 - 08:15 PM

Hi everyone, I am new to this for the most part and feel so stuck and can't figure out what I'm doing wrong to make it calculate. Can anyone nudge me in the right direction? Thanks!1

<script LANGUAGE="Javascript">

function compute() {
with (document.paycheck)

 if (hoursWorked <= 40) {  
          wages = hoursWorked * 15;
          overtimePay = 0;
          federalTax = wages * .15; 
          takeHomePay = wages - federalTax; 

            
      } else   {    
     // overtime involved   
          wages = 40 * 15; // for 1st 40 hours
          overtimeHours = hoursWorked - 40;
          overtimePay = overtimeHours * 20;   
          wages += overtimePay; 

          federalTax = (wages + overtimePay) * .15;

          takeHomePay = (wages + overtimePay) - .15;


</script>

<center>
<form name=paycheck>
<table border=1>
<tr>

<td align=right>Hours:</b></td>
<td><input type=text name=hoursWorked size=5></td>
</tr>
<tr>

<tr>
  
<td align=right><p>Tax Rate</td>
<td><input type=text name=federalTax value=.15 size=5></td>
</tr>
<tr>

<td align=right>Total Taxes:</td>
<td><input type=text name=tax size=5></td>
</tr>
<tr>

<tr>
</td>
<td align=right ><b>Your Paycheck:</b></td>
<td><input type=text name=takeHomePay size=5></td>
</tr>
<tr>
<td colspan=2 align=center><input type=button value="Calculate" onclick="compute()">
</td>
<td colspan=2 align=center><input type="button" value="Clear" onclick="this.form.reset()" />

</td>
</tr>
</table>
</form>
</center>



Is This A Good Question/Topic? 0
  • +

Replies To: How to make this return an answer?

#2 pbl  Icon User is offline

  • There is nothing you can't do with a JTable
  • member icon

Reputation: 8378
  • View blog
  • Posts: 31,956
  • Joined: 06-March 08

Re: How to make this return an answer?

Posted 09 November 2011 - 08:18 PM

Move from the Java forum to the Javascript forum
Was This Post Helpful? 0
  • +
  • -

#3 calvinthedestroyer  Icon User is offline

  • D.I.C Lover

Reputation: 170
  • View blog
  • Posts: 1,927
  • Joined: 13-October 07

Re: How to make this return an answer?

Posted 09 November 2011 - 08:26 PM

Shouldn't you have a line that say's:
{
document.getElementById("outputtextbox").innerHTML = calculatedresults;
document.getElementById("outputtextbox").value = calculatedresults;
}

you will have to replace those variable names with your own variables.

I'm not sure if that's right, I'm new at this stuf too.

This post has been edited by calvinthedestroyer: 09 November 2011 - 08:27 PM

Was This Post Helpful? 1
  • +
  • -

#4 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 879
  • View blog
  • Posts: 1,893
  • Joined: 30-January 09

Re: How to make this return an answer?

Posted 09 November 2011 - 08:30 PM

Your if statement is not closed off, and also your maths is... well... let's say it's novel. Try this:
if (hoursWorked <= 40)
{  
    wages = hoursWorked * 15;
    overtimePay = 0;
} else   {    
    // overtime involved   
    wages = 40 * 15; // for 1st 40 hours
    overtimeHours = hoursWorked - 40;
    overtimePay = overtimeHours * 20;   
    wages += overtimePay; 
}
federalTax = wages * .15; 
takeHomePay = wages - federalTax; 


Was This Post Helpful? 1
  • +
  • -

#5 kashally  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 09-November 11

Re: How to make this return an answer?

Posted 09 November 2011 - 08:43 PM

Ah much cleaner looking! You guys are amazing for knowing how to do this stuff. Thank you so much for the help! I'm still not getting it to compute though, any nudges?
Was This Post Helpful? 0
  • +
  • -

#6 kashally  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 09-November 11

Re: How to make this return an answer?

Posted 09 November 2011 - 09:24 PM

Can't figure out how to edit my previous post. It looks likes there's something I am missing that connects the user input of HOURS, and the script part to calculate it all. Is that right?
Was This Post Helpful? 0
  • +
  • -

#7 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 879
  • View blog
  • Posts: 1,893
  • Joined: 30-January 09

Re: How to make this return an answer?

Posted 09 November 2011 - 09:29 PM

I think your inputs might all require inverted commas around the values. Like this:
<input type="text" name="federalTax" value=".15" size="5">


Was This Post Helpful? 1
  • +
  • -

#8 kashally  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 09-November 11

Re: How to make this return an answer?

Posted 09 November 2011 - 09:41 PM

Good idea thank you! Off to try that and stare some more in hopes the connection I should be making appears lol
Was This Post Helpful? 0
  • +
  • -

#9 JackOfAllTrades  Icon User is offline

  • Saucy!
  • member icon

Reputation: 6246
  • View blog
  • Posts: 24,014
  • Joined: 23-August 08

Re: How to make this return an answer?

Posted 10 November 2011 - 04:30 AM

<script LANGUAGE="Javascript">


Change that to <script type="text/javascript"> while you're at it.
Was This Post Helpful? 0
  • +
  • -

#10 kashally  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 09-November 11

Re: How to make this return an answer?

Posted 10 November 2011 - 11:26 AM

Okay, I think I've figured out how to call on the user input for hours worked, but am still not getting it to compute.
<html>
<head>
<script type="text/javascript">

function compute()
{
	[b]document.getElementById("hoursWorked").innerHTML = '';[/b]
}


 {
with (document.paycheck)
if (hoursWorked <= 40)
}  
    wages = hoursWorked * 15;
    overtimePay = 0;
} else   {    
    // overtime involved   
    wages = 40 * 15; // for 1st 40 hours
    overtimeHours = hoursWorked - 40;
    overtimePay = overtimeHours * 20;   
    wages += overtimePay; 
}
document.paycheck.federalTax = wages * .15; 
document.paycheck.takeHomePay = wages - federalTax; 



</script>

<center>
<form name=paycheck>
<table border=1>
<tr>

<td align=right>Hours:</b></td>
<td>
[b]<input type="text" id='hoursWorked' value='' />[/b]

</tr>
<tr>

<tr>
  
<td align=right><p>Tax Rate</td>
<td><input type="text" name=federalTax value=".15" size="5"></td>
</tr>
<tr>


<tr>
</td>
<td align=right ><b>Your Paycheck:</b></td>
<td><input type="text" name="takeHomePay" size="5"></td>
</tr>
<tr>
<td colspan=2 align=center><input type="button" value="Calculate" onclick="compute()">
</td>
<td colspan=2 align=center><input type="button" value="Clear" onclick="this.form.reset()" />

</td>
</tr>
</table>
</form>
</center>


Was This Post Helpful? 0
  • +
  • -

#11 Vodkacannon  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 67
  • Joined: 07-November 11

Re: How to make this return an answer?

Posted 10 November 2011 - 04:26 PM

Shouldn't it be
function compute(form){
};

Was This Post Helpful? 0
  • +
  • -

#12 Vodkacannon  Icon User is offline

  • D.I.C Head

Reputation: 0
  • View blog
  • Posts: 67
  • Joined: 07-November 11

Re: How to make this return an answer?

Posted 10 November 2011 - 04:34 PM

Sorry I think I forgot another thing. You might also need to do this:
onclick=compute(this.form)

at line 57. That dosen't work? Even try using a capital c in onclick.
Anyway, why can't you edit your last post? :blink:
Was This Post Helpful? 0
  • +
  • -

#13 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 879
  • View blog
  • Posts: 1,893
  • Joined: 30-January 09

Re: How to make this return an answer?

Posted 10 November 2011 - 05:21 PM

Okay, at the risk of being a help vampire victim, I've come up with the solution for you. Firstly though, I'd like you to read through the following paragraphs describing where your problems were.

Firstly, the HTML:
You never closed off the <head> tag. You should always close off the head tag, even though most browsers are smart enough to realise that it hasn't been closed, and display the HTML regardless.
You are using a table, but weren't closing off all the <td> tags, and in fact there were excess <td> tags, supposedly because some were meant to be </td>
You had a <p> tag in there that wasn't closed off.
You were mixing XHTML and HTML together, evident by the use of both <input> and <input/>.
You also had excess <tr> tags.
You were using deprecated tags and attributes, you should use the style attribute instead.

Now, the best way to figure out if you're closing things off correctly is through proper indentation. Indentation doesn't just make the code look pretty, it serves a specific visual purpose, and that is debugging and layout. The key to debugging problems is laying out your code in an easy to read fashion, then you can easily see where things are amongst your DOM structure.

Secondly, the Javascript:
The brackets around your if statement were not in the right place, and there was an excess of closing brackets, meaning the Javascript wouldn't even get parsed by the browser.
You were clearing the hoursWorked field before you retrieved the value, meaning the calculation would always be on zero hours.
You were calculating tax on a static value, rather than the federalTax field in the form.
You weren't parsing the form element values to integer, which you need to do because they are entered as strings.
I've not used the with statement in Javascript before, but there's an easier way around the problem, and that's by referencing the form by id, and assigning that to an object.
You weren't referencing the form fields correctly, you need to reference them by value.

All this said, these problems are all beginners problems. I had the same trouble when I was starting out. Coding is not easy, it takes a lot of practice to get things right, and even the most experienced programmers often don't get things right the first time. Don't lose hope, it's a steep learning curve. The bulk of your code had the right intentions, which if the important part. It was just your syntax which needed a brush up.

Here's a working example of the code:
<html>
<head>
<script type="text/javascript">

function compute()
{
	var oPaycheck = document.getElementById("paycheck");
	hoursWorked = parseInt(oPaycheck.elements["hoursWorked"].value);
	federalTaxRate = parseFloat(oPaycheck.elements["federalTax"].value);
	if (hoursWorked <= 40)
	{
		wages = hoursWorked * 15;
		overtimePay = 0;
	} else {
		// overtime involved   
		wages = 40 * 15; // for 1st 40 hours
		overtimeHours = hoursWorked - 40;
		overtimePay = overtimeHours * 20;   
		wages += overtimePay; 
	}
	federalTax = wages * federalTaxRate; 
	oPaycheck.elements["takeHomePay"].value = wages - federalTax;
}

</script>
</head>

<body>
	<div>
		<form id="paycheck">
		<table style="border:1px solid #000;margin-left:auto;margin-right:auto">
			<tr>
				<td style="text-align:right; font-weight:bold">Hours:</td>
				<td>
					<input type="text" name="hoursWorked" value="">
				</td>
			</tr>
			<tr>
				<td style="text-align:right; font-weight:bold">Tax Rate</td>
				<td>
					<input type="text" name="federalTax" value=".15" size="5">
				</td>
			</tr>
			<tr>
				<td style="text-align:right; font-weight:bold">Your Paycheck:</td>
				<td>
					<input type="text" name="takeHomePay" size="5">
				</td>
			</tr>
			<tr>
				<td style="colspan:2; text-align:center">
					<input type="button" value="Calculate" onclick="compute()">
				</td>
				<td style="colspan:2; text-align:center">
					<input type="button" value="Clear" onclick="this.form.reset()">
				</td>
			</tr>
		</table>
		</form>
	</div>
</body>

</html>


This post has been edited by e_i_pi: 10 November 2011 - 05:34 PM

Was This Post Helpful? 1
  • +
  • -

#14 kashally  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 6
  • Joined: 09-November 11

Re: How to make this return an answer?

Posted 10 November 2011 - 06:51 PM

Thank you so much for the help. I'm not sure why I can't edit, I couldn't find the button to edit it? e_i_pi, thank you x10000 for taking the time to write that all out and help me. I actually just finished a class on Javascript (passed, but barely!), and the problem was for a friend from way back who knew I had just finished a Javascript class. She had class tonight and the professor helped her out and she turned a less fancy version in. Once I start something it drives me insane unless I finish it, so I didn't want to give up. I'm an IT major so I know I have to grasp these things and practice is the best way to do that, right? Thank you again for the explanations, I appreciate it so much!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1