Forum Moderators: open
Here is what I have I just can't figure out how to get the info to the second function to do the calculation without putting it straight into the function
JS File:
function taxButton(DivID,tax1ID,tax2ID,tax3ID,tax4ID){
var income1 = getInt('taxFile1');
var tax1 = taxes(income1);
setDiv(DivID, "Taxes #1=" + tax1);
var income2 = getInt('taxFile2');
var tax2 = taxes(income2);
addToDiv(DivID, "Taxes #2=" + tax1);
var income3 = getInt('taxFile3');
var tax3 = taxes(income3);
addToDiv(DivID, "Taxes #3=" + tax1);
var income4 = getInt('taxFile4');
var tax4 = taxes(income4);
addToDiv(DivID, "Taxes #4=" + tax1);
}
function taxes(income1,income2,income3,income4) {
// Fetch from HTML into JavaScript variables.
tax1=taxButton(id)
if (tax1<=7835) {
baseT=.10;
preTax=(tax1*baseT);
tax= preTax.toFixed(2);
}
else
if ((tax1 > 7835 ) && (tax1 <= 31, 850)) {
baseT = 782.50;
preTax = (tax1 - 7835) * .15 + baseT;
tax = preTax.toFixed(2);
}
else
if ((tax1 > 31850) && (tax1 <= 77100)) {
baseT = 4386.25;
preTax = (tax1 - 31850) * .25 + baseT;
tax = preTax.toFixed(2);
}
else
if ((tax1 > 77100) && (tax1 <= 160850 )) {
baseT = 15698.75;
preTax = (tax1 - 77100) * .28 + baseT;
tax = preTax.toFixed(2);
}
else
if ((tax1 > 160850) && (tax1 <= 349700)) {
baseT = 39148.75;
preTax = (tax1 - 160850) * .33 + baseT;
tax = preTax.toFixed(2);
}
else
if (tax1 > 349700 ) {
baseT = 101469.25;
preTax = (tax1 - 349700) * .35 + baseT;
tax = preTax.toFixed(2);
}
return tax
}
HTML:
<html>
<head>
<title>HTML To JavaScript Example</title>
<script src="get.js" language="JavaScript" type="text/javascript">
function getInt(id) {
return parseInt(document.getElementById(id).value);
}</script>
<script src="tax.js" language="JavaScript" type="text/javascript"></script>
<script src="div.js" language="JavaScript" type="text/javascript"></script>
</head>
<body>
<h1>Lab2</h1>
<form>
<p>Taxable Income #1:
<input id="taxFile1" value="5123"/></p>
<p>Taxable Income #2:
<input id="taxFile2" value="20000"/><br></p>
Taxable Income #3:
<input id="taxFile3" value="300000"/></p>
Taxable Income #4:
<input id="taxFile4" value="400000"/></p>
<input type="button" value="Calculate Tax" onclick="taxButton('outputDivId','taxFile1','taxFile2','taxFile3','taxFile4');"/>
<hr>
<div id="outputDivId" name="output" style="display: block;">
</form>
</body>
</html>
Any suggestions would be helpful.
Side-stepping the question momentarily, there are other problems "in the way" of the answer.
onclick="taxButton('outputDivId','taxFile1','taxFile2','taxFile3','taxFile4')...
What this does is passes the strings 'outputDivId', etc., to the function taxButton. Add alerts to temporarily verify the values is also helpful.
function taxButton(DivID,tax1ID,tax2ID,tax3ID,tax4ID){
alert('Div ID: ' + DivID + ' TID: ' + tax1ID: + ' T2: ' + tax2ID + ' T3: ' + tax3ID + ' T4: ' + tax4ID);
Now you have the strings that correspond to the forms, but they are just that - strings without connection to the form objects or their value attributes. You need to add document.getElementById to access those.
There's no getInt function in JS. (I had to stop and look it up, thought I'd forgotten something again!) With the Error Console you would get "getInt() is undefined." By the name of it, presuming you want an integer value, you would use
var income1 = parseInt('taxFile1');
alert(income);
The alert on this value gives you NaN - not a number. 'taxFile1' is a string (quotes.) If you remove the quotes, this makes it a variable (or an intended one) and you get an undefined error in the error console, because there's no variable named taxFile1.
So putting the two together - you have passed the id's of the form elements here,
onclick="taxButton('outputDivId','taxFile1','taxFile2','taxFile3','taxFile4')...
received them here,
function taxButton(DivID,tax1ID,tax2ID,tax3ID,tax4ID){
now use those passed values in combination with document.getElementById to access the form element values, and add an alert to make sure it does.
var income1 = parseInt(document.getElementById(tax1ID).value);
alert(income1);
Note we've "nested" the form value in parseInt, but you will still have a problem if the form field is empty (NaN. - figure out how to validate it after you get it working.)
Apply this to the other variables in this function, using the parameter variables passed to the function.
Now we get to your question. The above should pass a valid value to the function taxes.
Here you have the same problem:
var tax1 = taxes(income1);
You are saying pass the value of the variable "income1" to the function taxes and store the returned result in the variable "tax1."
You pass a single value to the function taxes, but have it accepting four parameters:
function taxes(income1,income2,income3,income4) {
Then here, what is 'id'?
tax1=taxButton(id)
(answer: undefined.) The second problem within this line - if it didn't error - you are calling taxButton again, which calls taxes again, which calls taxButton again . . . causing a recursive loop that will eventually error out after too may iterations.
What you probably want is a single input value, then use that value in the function. It's already defined as a variable by creating the variable in the parameter, no reason to store it in tax1, just use that in the function.
function taxes(tax1) {
// Dont' need this: tax1=taxButton(id) //
The rest of that function looks OK at a glance, the error console will tell you if it's not - the only other thing you missed in this function is the semicolon on the return.
return tax;
It's a good idea to define and set the variables used in the function and cast them as numbers:
function taxes(tax1) {
baseT=preTax=tax=0;
Once you see it's "sorta" working (keep checking that error console,) you can incorporate data validation to manage invalid input values (blank or non-numeric.) As always there's always a better way to do what needs to be done - but this should get you started.
For plain text output, you add a newline.
document.write('this is a multiline \n document write.');
In HTML, you'd only see this by viewing source; browsers collapse white space. So you need to use the break tag.
document.write('this is a multiline <br> document write.');
Or <br/> if you are using XHTML which most pages shouldn't [webmasterworld.com] (and companion thread [webmasterworld.com] on choosing the best doctype.)
JS file:
function taxButton(DivID,tax1ID,tax2ID,tax3ID,tax4ID){
var income1 = getInt('taxFile1');
var tax1 = taxes(income1);
setDiv(DivID, "Taxes #1=" + tax1);
var income2 = getInt('taxFile2');
var tax2 = taxes(income2);
addToDiv(DivID, "Taxes #2=" + tax2);
var income3 = getInt('taxFile3');
var tax3 = taxes(income3);
addToDiv(DivID, "Taxes #3=" + tax3);
var income4 = getInt('taxFile4');
var tax4 = taxes(income4);
addToDiv(DivID, "Taxes #4=" + tax4);
The setDiv and addToDiv lines are the output and they all go in as one line.
