Home/ Questions/Q 4562170
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T18:10:42+00:00

This one ought to be a slam dunk for somebody. I am a total

  • 0

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.

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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:

    1. 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.

    2. As mentioned elsewhere, don’t use eval(), use parseInt() to get integers and parseDouble() to get floats.

    3. = is the assignment operator, == and === are used to check equality. Of these two, === should be preferred. == will perform coercion while === will not.

    4. 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:

    1. You could use else ifs since only one of the conditions could be true at any time. You could also use switch-case instead.

    2. 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.

    • 0