根据选择菜单选项显示 javascript 计算答案

【问题标题】：Displaying javascript calculation based on select menu option根据选择菜单选项显示 javascript 计算
【发布时间】：2011-08-15 02:58:20
【问题描述】：

这对某人来说应该是一个灌篮。我是一个完全的 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>

【问题讨论】：

eval 是邪恶的。你不需要在这里使用它。使用 parseInt(value, 10) 代替（或 parseFloat）。
three = eval(document.theForm3.elements[3]) 这个至少应该改成...elements[2]

标签： javascript select menu calculator

【解决方案1】：

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

如果 (a == b)

检查a是否等于b

如果 (a = b)

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

这是您遇到的一个值得注意的错误，但我不能确定它是导致您问题的原因。

【讨论】：

我什至更喜欢===而不是==。当你不确定变量的类型时，你只会使用==，它不应该是：p
您对 if (a = b) 总是返回 true 的评论不正确。 if (a = b) 将 a 设置为 b 的值，然后评估那个值的真实性。例如：b = 0; if (a = b) { /* this is false */ }
我将您的代码放入 JSFiddle.net（出色的工具）并使用 JSLint（JavaScript 编译器），它说比较是您唯一的错误……除了丢失分号的负载。我建议在每个语句后加上分号，只是为了整洁
谢谢迈克尔，这可能会导致问题，对吧？我已将 if 语句中的“=”替换为“==”。还是不行，但我更近了一步。另一个提示是 Firefox 的错误控制台说我在第 15 行缺少一个 before 语句（我在其中定义了“三”变量）。
@user719431 您最大的问题是您使用索引 3 来获取下拉菜单的值，它位于索引 2。请参阅我的答案。

【解决方案2】：

将 eval 更改为：

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

赋值而不是比较：

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

改为：

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

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

document.theForm3.elements[3].value

正确方法：

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

我认为这应该可以修复您的代码。

【讨论】：

再次感谢弗里茨！我试过了，但没有骰子...错误控制台告诉我 selectedIndex 由于某种原因未定义...
你在document.theForm3.elements[2]上试过了吗？因为 3 实际上是按钮 >_>

【解决方案3】：

这是一种方法：

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

这里是a working example。

【讨论】：

这就像一个魅力，不，好！我非常感谢背景信息，并让我知道为什么事情有效或无效。非常感谢！
@optional 1. 你也可以使用 switch/case
@optional2 我只使用输入元素的名称属性。然后你可以document.formname.inputname，干净多了。
@Frits 谢谢，我已经抓住了其中的第一个，第二个很高兴知道 - 我已将其添加到答案中。