Question

I have a 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>

When I enter width = 400, it is ok. And when I enter width = 200, it does not show the error message. How can I fix that?

Answer 1

Why

Let’s first take a look at the code:

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

This will happen if it is bigger than 400 right? And when it goes down to 200, its visibility is still hidden. That’s why it doesn’t show up.

Fixing it

Make it visible will fix it.

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";
}

and actually you don’t need to hide it because it doesn’t have anything it it when the width is bigger than 300.

And…

You might want to change this

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

to this:

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

---

Hope this help you out.
Demo: http://jsfiddle.net/DerekL/yW8wt/