A text box appears when I load the page even though I have set its “style:display” to none

Question

<input type="text" name="otherPONumber" id="otherPONumber" maxlength="25" style="display: none;">


<script type="text/javascript">
function toggleField(val) {
    var obj = document.getElementById('otherPONumber');
        if(obj != undefined && txt != undefined) {
        (val == 'Other')? obj.style.display = 'block' : obj.style.display = 'none';

    }
}

</script>

Inspite of this, the text box appears when the page loads.

Answer 1

(val == 'Other')? obj.style.display = 'block' : obj.style.display = 'none';

This abuse of the ternary operator is torrible. Replace it with the following:

obj.style.display = (val == 'Other') ? 'block' : 'none';

If the element is displayed right after loading, use Firefox (or a similar tool) to check if there's some CSS rule overriding your inline style.