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(), use parseInt() to get integers and parseDouble() 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].value gets 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 getElementsById instead. As @Frits notes in the comment below, you could also use the syntax document.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.

Displaying javascript calculation based on select menu option

精彩评论

关注公众号

热门标签

图文推荐

Displaying javascript calculation based on select menu option

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：