Question

对于某人来说，这应该是一个扣篮。我是一个完整的Javascript新手，所以我很惊讶我已经走到了这一步。这么多，当你看到我的代码时，你很可能会立即看到它的明显问题，并嘲笑我，因为我在这一点上盲目地猜测语法。请查看下面的违规代码并轻松享受。我等一下。

好的，所以我正在尝试制作一个简单的计算器，显示每月通过支付现金购买公交车票的节省。我正在尝试根据选择菜单中选择的区域显示不同的答案。当我简单地列出if语句之外的变量（因此我前面提到的惊愕）时，每个if语句中的公式确实有效，在一系列警告框中显示每个答案，但我只想显示适用的答案，并且清楚我的语法完全失控。

我很荣幸也很荣幸能够接受这个问题的学习，当然要记住我不那么基本的JS技能。非常感谢。

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

Answer 1

这是一种方法：

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  +  ".");
    }
}

修正：

你到处都缺少;（分号） - 对于开发者来说，它们似乎是“可选的”，但在内部，JavaScript会自动添加它们，导致很难跟踪错误。在每个陈述的末尾放一个。
如其他地方所述，请勿使用eval()，使用parseInt()获取整数，使用parseDouble()获取浮点数。
=是赋值运算符，==和===用于检查相等性。在这两个中，===应该是首选。 ==将执行强制，===则不会。
我认为最大的问题是 document.theForm3.elements[3].value获取按钮而不是选择框。它应该是索引2.

任选地：

您可以使用else if，因为任何时候只有一个条件可以为真。您也可以使用switch-case代替。
我也会避免使用索引来获取元素，因为您可能决定稍后更改表单，确保正确更新所有索引会很痛苦。请查看getElementsById。正如@Frits在下面的评论中所指出的那样，您也可以使用语法document.formname.inputname（即表单的document.theForm3.zone.value;）来更清晰，更安全地获取元素。

这是a working example。

Answer 2

你的if语句是分配而不是比较。有关javascript中比较器的详细信息，请参阅http://www.w3schools.com/js/js_comparisons.asp。

if（a == b）

检查a是否等于b

if（a = b）

设置等于b的值然后返回true，即这总是通过。

这有一个明显的错误，但我不能确定它是导致你的问题的那个。

Answer 3

将eval更改为：

parseFloat(document.theForm3.elements[0].value, 10);

分配而不是比较：

if(document.theForm3.elements[3].value = "Base"){

更改为：

if(document.theForm3.elements[3].value === "Base"){

选择框没有值属性（尽管现代浏览器接受它）

document.theForm3.elements[3].value

正确的方式：

var select = document.theForm3.elements[2];
select.options[select.selectedIndex].value; // <-- this is the 'value'

我认为应该修复你的代码。

显示基于选择菜单选项的javascript计算

3 个答案: