如果聲明給我未定義的結果

Question

我已經構建了一個窗體，顯示根據用戶選擇的結果。我試圖將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> 

在此先感謝。

Answer 1

您的寬度和深度值以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 example

旁註：你有這似乎永遠無法成爲真正的條件：

if (height === "525" && width === "134" && depth === "290") { 
    if (height === "525" && width === "290" && depth === "134")... 

Answer 2

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後綴，所以他們將不等於後綴少的數字。

Answer 3

如果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演示here。