若语句给出了未定义的结果
If statement gives me undefined result
我构建了一个表单,根据用户的选择显示结果。我试图把一个if语句放在一起,它将在选择特定值时输出数据表1。我希望有人选择525、134和290给我数据表1,否则给我数据单3。这是我的代码:
<form name="test" id="test"">
<label for="select1">Height in (mm)</label>
<select name="division-select" id="height">
<option label="Please Select"></option>
<option value="525">525 or less</option>
<option value="645">645 or less</option>
<option value="1265">up to 1265</option>
<option value="1270">more than 1265</option>
</select>
<label for="select1">Width in (mm)</label>
<select name="division-select" id="width">
<option label="Please Select"></option>
<option value="134w">134 or less</option>
<option value="190w">190 or less </option>
<option value="290w">290 or less</option>
<option value="328w">328 or less</option>
<option value="420w">420 or more</option>
</select>
<Br>
<br>
<label for="select1">Depth in (mm)</label>
<select name="division-select" id="depth">
<option label="Please Select"></option>
<option value="134d">134 or less</option>
<option value="190d">190 or less </option>
<option value="290d">290 or less</option>
<option value="328d">328 or less</option>
<option value="420d">420 or more</option>
</select>
<br><br>
<h2>Or select by load</h2>
<label for="select1">Load in (kN)</label>
<select name="division-select" id="load">
<option label="Please Select"></option>
<option value="2-5">2.5 or less</option>
<option value="5">5 or less </option>
<option value="10">10 or less</option>
<option value="25">25 or less</option>
<option value="50">50 or more</option>
</select>
<br>
<p><input type="button" onclick="calculate();" value="Find your Datasheet" /><input type="button" onclick="formReset()" value="Reset form"></p>
</form>
<div id="result">
</div>
<script type="text/javascript">
function calculate() {
var height = document.getElementById('height').value;
var width = document.getElementById('width').value;
var depth = document.getElementById('depth').value;
var load = document.getElementById('load').value;
if (document.getElementById("height").value == "") {
var heightmsg = "Please select your sample's height.";
document.getElementById("result").innerHTML = heightmsg;
return false;
}
if (document.getElementById("width").value == "") {
var widthmsg = "Please select your sample's width.";
document.getElementById("result").innerHTML = widthmsg;
return false;
}
if (document.getElementById("depth").value == "") {
var depthmsg = "Please select your sample's depth.";
document.getElementById("result").innerHTML = depthmsg;
return false;
}
if (height === "525" && width === "134" && depth === "290") {
if (height === "525" && width === "290" && depth === "134") {
var str = '<a href="#">Download your Datasheet 1</a>';
} else {
var str = '<a href="#">Download your Datasheet 3</a>';
}
} else if (height == 1270) {
var str = "This configuration is beyond the standard range of top-load testers. Please contact Mecmesin Sales to discuss ways to meet your requirements.";
}
document.getElementById("result").innerHTML = str;
}
function formReset() {
document.getElementById("test").reset();
}
</script>
提前谢谢。
您的宽度和深度值以w和d结尾(例如<option value="190d">
(,但您没有在if条件(if (height === "525" && width === "134" && depth === "290")
(中检查这一点。从这样的值中去掉w和d:
<select name="division-select" id="width">
<option label="Please Select"></option>
<option value="134">134 or less</option>
<option value="190">190 or less</option>
<option value="290">290 or less</option>
<option value="328">328 or less</option>
<option value="420">420 or more</option>
</select>
jsFiddle示例
旁注:你有一个似乎永远不可能是真的情况:
if (height === "525" && width === "134" && depth === "290") {
if (height === "525" && width === "290" && depth === "134")...
if (height === "525" && width === "134" && depth === "290") {
if (height === "525" && width === "290" && depth === "134") {
毫无意义。如果第一个条件是真的,第二个永远不可能。我想你想要
if (height === "525" && width === "290" && depth === "134")
var str = '<a href="#">Download your Datasheet 1</a>';
else if (height === "525" && width === "134" && depth === "290")
var str = '<a href="#">Download your Datasheet 3</a>';
else if (height == 1270)
var str = "This configuration is beyond the standard range of top-load testers. Please contact Mecmesin Sales to discuss ways to meet your requirements.";
还要注意,<option>
标记的值以w
和d
为后缀,因此它们不会等于无后缀的数字。
如果您使用了太多if语句,如果您想为三个选择输入(宽度、高度、深度(中的每个选项指定一个单独的链接,您最终会得到4x5x5=100 if语句。最简单的方法是创建一个包含所有值和通讯器链接的mysql数据库,或者可以使用XML或JSON数组。
对于空的选择输入验证,您可以使用:
var height = document.getElementById('height'),
width = document.getElementById('width'),
depth = document.getElementById('depth'),
load = document.getElementById('load'),
result = document.getElementById('result'),
arr = [height, width, depth],
error = "Please select your sample's ";
for (var i = 0; i < arr.length; i++) {
var t = arr[i].id;
if (arr[i].value == "") result.innerHTML = error + t;
return false;
}
有关JSON示例,请参阅jsfiddle上的Demo。
相关文章:
- 试图将onChange函数作为道具传递给GrandChlidren,结果是TypeError:这是未定义的
- 解析-为什么user.getSessionToken()返回未定义的结果
- Chrome扩展,Chrome.tabs.query的结果未定义
- 从JSON API结果迭代时未定义
- json-api和错误结果:无法读取属性'长度'的未定义
- 在页面对象文件中验证sendKeys结果会导致未定义的错误(Protractor)
- Meteor js-控制台显示'未定义'即使返回结果
- 获取结果未定义(主干.js)
- 从 Angular 数据工厂中的 HTTP POST 请求接收未定义的结果
- 离子警报 - 检查结果是否未定义
- 使用String.FromCharCode时,jQuery返回未定义的结果
- 解析JSON字符串返回未定义的结果
- Javascript:添加键值对文字,给出未定义的结果
- Javascript/Underscore赢得't跳过未定义的结果
- 为什么这个JavaScript代码的结果是“;未定义”;
- “渲染骨干模型视图”返回未定义的结果
- 流星:防止 findOne() 的未定义结果
- node.js process.env:将 process.env 属性分配给字符串类型中的未定义结果
- JSON “未定义”结果
- 打印数组时的 JavaScript 未定义结果