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!

Could it be that you're calling the function before the DOM is fully loaded? Also, although it's not the problem here, you should call the function with a string, not an integer (clock_Type("1");). — Max Shawabkeh
– Max Shawabkeh, Commented Feb 5, 2010 at 12:00
@Max — it seems unlikely, it is coming from an onchange event. — Quentin
– Quentin, Commented Feb 5, 2010 at 13:00
@David: it's not clear whether that is the case: "...when I try to call the JS function clock_Type() from another function...". — Max Shawabkeh
– Max Shawabkeh, Commented Feb 5, 2010 at 13:07
@Max, David: Thanks for looking into this issue. I had tried string too in the function call. But as I mentioned, the execution reaches the following lines of code in FF. clockType.style.display = "table-row"; clockSource.style.display = "table-row"; But I cannot see the style change in browser. — Sangeeth VS
– Sangeeth VS, Commented Feb 8, 2010 at 6:07

Joel · Accepted Answer · 2010-02-08 16:09:26Z

1

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).

edited Feb 8, 2010 at 16:09

answered Feb 5, 2010 at 17:15

Joel

19.4k3 gold badges67 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Sangeeth VS Over a year ago

@Joel: Thanks for answering. Let me give you more information on what I'm trying to do. I have a select box (clock) on a page along with other form elements. It has values 'Enabled' and 'Disabled'. When the value is 'Enabled', I have to display two tables rows (clockType & clockSource) and when the value is 'Disabled' these rows should be hidden. As I mentioned, this is working fine on onChange of the clock select box. But when I try to call the JS function clock_Type() from another function, the style change is not reflected.

Sangeeth VS Over a year ago

The need for calling clock_Type() from another function is that I need to populate the form fields with values from the database. So after I populate the clock select box, I need to hide/display the clockType & clockSource table rows based on the Clock value i.e enabled/disabled.

Joel Over a year ago

Sorry, I misunderstood your question.

Yaroslav · Accepted Answer · 2010-02-05 17:08:13Z

0

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.

answered Feb 5, 2010 at 17:08

Yaroslav

2,73617 silver badges16 bronze badges

1 Comment

Sangeeth VS Over a year ago

@Yaroslav: There is no css class for #clockType and #clockSource elements.

Collectives™ on Stack Overflow

CSS style.display not working

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related