Если оператор дает мне неопределенный результат

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")). Возьмите ш и д из значений, как это:

<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 увидеть демо here на jsfiddle.