CSS style.display not working

Question

I have the following JavaScript function to display/hide a table row based on a listbox selection.

function clock_Type(id) {
    var clockSource = document.getElementById("clockSource");
    var clockType = document.getElementById("clockType");

    if(id == "1") {
        if(navigator.appName == "Microsoft Internet Explorer") {
            clockType.style.display = "inline";
            clockSource.style.display = "inline";
        } else {
            clockType.style.display = "table-row";
            clockSource.style.display = "table-row";
        }
    } else {
        clockType.style.display = "none";
        clockSource.style.display = "none";
    }
}

Following is the listbox.

<select id="clck" name="clock" class="selectStyle" style="width: 155px;" onchange="clock_Type(this.value)">
    <option value="0">Disabled</option>
    <option value="1">Enabled</option>
</select>

This is working fine on the listbox onchange event. i.e. the table row is getting hidden and displayed. But when I try to call the JS function clock_Type() from another function, as shown below, the table row is not getting displayed.

function foo() {
   clock_Type(1);
}

When I traced the code the execution reaches the following section for FireFox

clockType.style.display = "table-row";
clockSource.style.display = "table-row";

But the table row is not getting displayed. Any idea what could be the issue here. Thanks in advance!

Answer 1

Does #clockType and #clockSource elements have css class that sets display style? In this case I'd tried to remove it and set display style inline.

Answer 2

Set the display to an empty string instead of specifying "table-row" or "inline". This will give the elements a default display, so unless they are specified display:none; in a stylesheet the user agent will negotiate the proper display.

clockType.style.display = "";
clockSource.style.display = "";

This also eliminates the need to execute a browser check which is not good practice.

EDIT:

I misunderstood your question before. However, I tested your code here and it seems to work fine (tested in FF 3.5.3, Chrome 4, IE8).