Javascript returns incorrecct results

Question

在我开始之前，我想说如果这个问题已经得到解答，请直接给我相应的答案。

我遇到了一个问题，我的Java脚本函数没有返回期望的值。我正在尝试使用它来验证数字范围的文本输入，并且如果输入在该范围之外，则返回自定义错误消息。

这里是一个表单中的字段，我正在试图验证的一个HTML：

<td><input name="bottomair" type="text" required id="bottomair" 
    size="3" onChange="bottomAirF()"></td> 
<td class="noborder" id="bottomairerror"></td> 

这里是相关联的JavaScript：

function bottomAirF() { 
    var x, text; 
    x = document.getElementById("bottomair"); 
    if (isNaN(x) || x < 33 || x > 40) { 
     text = "Temp Out of Tolerance"; 
    } else { 
     text = " "; 
    } 
    document.getElementById("bottomairerror").innerHTML = text; 
} 

什么我想完成功能是检查输入的数字是否在33和40之间。如果数字不在这两个数字之间，代码应该返回错误消息“Temp Out of Tolerance”，但是如果数字在33和40它不应该返回。就目前来看，任何数字（或缺少）都会返回错误消息。

此代码已从W3School的比较功能进行了修改。

我已经尝试了一切，我可以想到，它仍然无法正常工作，所以任何帮助将不胜感激。

Answer 1

尽管所有的答案贴在技术上是正确的，我相信这个解决方案是既不maintenable也不扩展。

你很难依赖于静态的元素id。

想象如果您将来希望添加更多执行此类验证的td s，您是否要跟踪新添加的行？ 虽然在技术上你可以但在人类学上它的精神枯竭和这样的事情否认利用计算机和软件设计的目的 - 自动化。 有些东西可以让你做创造性的工作，并让计算机完成机械工作。

由于这个哲学原因，我相信这段代码是一个更好的解决方案。

HTML - 删除Ids并将this表示当前元素（在此情况下为输入）作为函数的参数。

<table> 
    <tr> 
     <td><input type="text" required size="3" onChange="bottomAirF(this)"></td> 
     <td class="noborder"></td> 
    </tr> 
</table> 

JS - 使用DOM访问器来查找下一个td和更新它的innerHTML

function bottomAirF(elem) { 
    var x, text; 
    x = +elem.value; // Prepended + sign will parse whatever follows to integer. 
    if (isNaN(x) || x < 33 || x > 40) { 
     text = "Temp Out of Tolerance"; 
    } else { 
     text = " "; 
    } 
    elem.parentNode.nextElementSibling.innerHTML = text; 
} 

编辑：对于更新的要求

要添加新的验证和条件。

假设您有3个需要验证的文本框。每个文本框都有不同的验证参数。

首先应只接受值1和10

之间

其次应该只有11和33

之间接受值

第三应该只接受33和41

之间

值于是更新的代码将是， （该功能的名称将改为某种通用的，如 validate）

请注意，input元素上还有两个附加属性，即指定范围的和val-max。

<table> 
    <tr> 
     <td><input type="text" required val-min="1" val-max="10" size="3" onChange="validate(this)"></td> 
     <td class="noborder"></td> 
    </tr> 
    <tr> 
     <td><input type="text" required val-min="11" val-max="33" size="3" onChange="validate(this)"></td> 
     <td class="noborder"></td> 
    </tr> 
    <tr> 
     <td><input type="text" required val-min="33" val-max="40" size="3" onChange="validate(this)"></td> 
     <td class="noborder"></td> 
    </tr> 
</table> 

JS代码

function validate(elem) { 
    var x, text; 
    x = +elem.value; // Prepended + sign will parse whatever follows to integer. 
    var min = elem.getAttribute('val-min'); 
    var max = elem.getAttribute('val-max') 
    if (isNaN(x) || x < min || x > max) { 
     text = "Temp Out of Tolerance"; 
    } else { 
     text = " "; 
    } 
    elem.parentNode.nextElementSibling.innerHTML = text; 
} 

Working Fiddle

Answer 2

你缺少.value

x = document.getElementById("bottomair").value; 

Answer 3

请代替这一行：

document.getElementById("bottomair"); 

写这行：

document.getElementById("bottomair").value; 

Answer 4

它应该是这样的

x = document.getElementById("bottomair").value; 
    if (isNaN(x) || parseInt(x,10) < 33 || parseInt(x) > 40) { 
     text = "Temp Out of Tolerance"; 
    } else { 
     text = " "; 
    } 

Answer 5

你已经做得很好你需要的是 值增加的document.getElementById（“bottomair”）

这是我刚刚添加的.value的

X =文档解决方案.getElementById（“bottomair”）。 值;

Answer 6

肯定是错过.value的

 $(document).ready(function() { 

     $("#btnCalc").click(
      function() { 
       bottomAirF(); 
      }    
     ); 
    }); 



function bottomAirF() { 
    var x, text; 
    x = document.getElementById("bottomair").value; 

    if (isNaN(x) || x < 33 || x > 40) { 
     text = "Temp Out of Tolerance"; 
    } else { 
     text = " "; 
    } 

    document.getElementById("bottomairerror").innerHTML = text; 
} 

见 Simple JSFiddle Example