Displaying javascript calculation based on select menu option
This one ought to be a slam dunk for somebody. I am a total Javascript novice, so much so that I'm amazed I've gotten this far. So much so that when you look at my code, you'll very likely immediately see glaring problems with it and laugh at me, because I am blindly guessing at syntax at this point. Please see the offending code below and enjoy a chuckle. I'll wait.
开发者_Go百科Okay, so I'm trying to make a simple calculator that displays the monthly savings of buying a bus pass over paying cash. I'm trying to display a different answer depending upon the zone chosen in the select menu. The formulas in each if statement does actually work when I simply list the variables outside of if statements (hence my aforementioned amazement), displaying each answer in a series of alert boxes, but I'd like to display only the applicable answer, and clearly my syntax is all out of whack.
I'd be honored and humbled to be schooled in this matter, bearing in mind of course my less-than-rudimentary JS skills. Much advance thanks.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Cost Savings Calculator</title>
<script language="JavaScript">
<!-- Begin CE MP Savings Calc script
function doMath3() {
var one = eval(document.theForm3.elements[0].value)
var two = eval(document.theForm3.elements[1].value)
var three = eval(document.theForm3.elements[3].value)
if(document.theForm3.elements[3].value = "z4"){
var prodZ4 = (((one * two) * 4.25) *12) - 1680
alert("Your yearly savings if you buy a Commuter Express Zone 4 monthly pass is $" + prodZ4 + ".")
}
if(document.theForm3.elements[3].value = "z3"){
var prodZ3 = (((one * two) * 3.75) *12) - 1488
alert("Your yearly savings if you buy a Commuter Express Zone 3 monthly pass is $" + prodZ3 + ".")
}
if(document.theForm3.elements[3].value = "z2"){
var prodZ2 = (((one * two) * 3) *12) - 1200
alert("Your yearly savings if you buy a Commuter Express Zone 2 monthly pass is $" + prodZ2 + ".")
}
if(document.theForm3.elements[3].value = "z1"){
var prodZ1 = (((one * two) * 2.5) *12) - 960
alert("Your yearly savings if you buy a Commuter Express Zone 1 monthly pass is $" + prodZ1 + ".")
}
if(document.theForm3.elements[3].value = "Base"){
var prodBase = (((one * two) * 1.5) *12) - 684
alert("Your yearly savings if you buy a Commuter Express Base monthly pass is $" + prodBase + ".")
}
}
// End CE MP Savings Calc script -->
</script>
</head>
<body>
<form name="theForm3">
Days you commute monthly:
<input type="text">
Daily trips on Commuter Express:
<input type="text">
Choose Zone: <select name="zone">
<option value="Base">Base</option>
<option value="z1">Zone 1</option>
<option value="z2">Zone 2</option>
<option value="z3">Zone 3</option>
<option value="z4">Zone 4</option>
</select>
<input type="button" value="Show result" onclick="doMath3()">
</form>
</body>
</html>
Here's one way of doing it:
function doMath3() {
var one = parseInt(document.theForm3.elements[0].value);
var two = parseInt(document.theForm3.elements[1].value);
var selection = document.getElementsByName("zone")[0].value;
if(selection === "z4"){
var prodZ4 = (((one * two) * 4.25) *12) - 1680;
alert("Your yearly savings if you buy a Commuter Express Zone 4 monthly pass is $" + prodZ4 + ".");
}
else if(selection === "z3"){
var prodZ3 = (((one * two) * 3.75) *12) - 1488;
alert("Your yearly savings if you buy a Commuter Express Zone 3 monthly pass is $" + prodZ3 + ".");
}
else if(selection === "z2"){
var prodZ2 = (((one * two) * 3) *12) - 1200;
alert("Your yearly savings if you buy a Commuter Express Zone 2 monthly pass is $" + prodZ2 + ".");
}
else if(selection === "z1"){
var prodZ1 = (((one * two) * 2.5) *12) - 960;
alert("Your yearly savings if you buy a Commuter Express Zone 1 monthly pass is $" + prodZ1 + ".");
}
else if(selection === "Base"){
var prodBase = (((one * two) * 1.5) *12) - 684;
alert("Your yearly savings if you buy a Commuter Express Base monthly pass is $" + prodBase + ".");
}
}
Fixes:
You're missing
;(semi-colon's) everywhere - they might seem to be 'optional' for the developer but internally, JavaScript will add them automatically leading to hard to track bugs. Put one at the end of every statement.As mentioned elsewhere, don't use
eval(), useparseInt()to get integers andparseDouble()to get floats.=is the assignment operator,==and===are used to check equality. Of these two,===should be preferred.==will perform coercion while===will not.The biggest problem I think was that
document.theForm3.elements[3].valuegets the button and not the select box. It should be index 2.
Optionally:
You could use
else ifs since only one of the conditions could be true at any time. You could also use switch-case instead.I would also avoid using indexes to get the elements since you might decide to change the form later and it's going to be painful to make sure you update all the indices correctly. Check out
getElementsByIdinstead. As @Frits notes in the comment below, you could also use the syntaxdocument.formname.inputname(i.e.document.theForm3.zone.value;for your form) to get the element much more cleanly and safely.
Here's a working example.
Your if statements are assigning instead of comparing. See http://www.w3schools.com/js/js_comparisons.asp for details on comparitors in javascript.
if ( a == b )
checks to see if a is equal to b
if ( a = b )
sets a equal to the value of b and then returns true, ie this always passes.
Thats one noticable error you have, though I can't be certain its the one causing your issue.
Change eval to:
parseFloat(document.theForm3.elements[0].value, 10);
Assignment instead of comparison:
if(document.theForm3.elements[3].value = "Base"){
Change to:
if(document.theForm3.elements[3].value === "Base"){
Select boxes don't have a value property (although modern browsers accept it)
document.theForm3.elements[3].value
Correct way:
var select = document.theForm3.elements[2];
select.options[select.selectedIndex].value; // <-- this is the 'value'
I think that should fix your code.
加载中,请稍侯......
精彩评论