单击表单输入时无法显示错误

Question

我有一个javascript：

<script>
function updatecode() {
    var widthError = "<span style='color:#ff0000'>Error</span>";
    var width = document.getElementById('width').value;
    if(width < 300) {
        document.getElementById('error_width').innerHTML = widthError;
    }else {
        document.getElementById('error_width').style.visibility = "hidden";
    }
}
</script>
<input type="text" name="width" id="width" value="auto" onchange="updatecode()" />
<span id="error_width"></span>

当我输入width = 400时，没关系。当我输入width = 200时，它不会显示错误消息。我该如何解决这个问题？

Answer 1

为什么

我们先来看看代码：

else {
    document.getElementById('error_width').style.visibility = "hidden";
}

如果大于400，会发生这种情况吗？当它下降到200时，它的visibility仍然是隐藏的。这就是它没有出现的原因。

修复它

让它可见将修复它。

if(width < 300){
    document.getElementById('error_width').innerHTML = widthError;
    document.getElementById('error_width').style.visibility = "";
}else{
    document.getElementById('error_width').innerHTML = "";
    document.getElementById('error_width').style.visibility = "hidden";
}

实际上你不需要隐藏它，因为当width大于300时它没有任何东西。

而...

您可能想要更改此

var width = document.getElementById('width').value;

到此：

var width = parseInt(document.getElementById('width').value,10);

---

希望这可以帮到你。 演示：http://jsfiddle.net/DerekL/yW8wt/