How to modify a CSS display property from JavaScript?

Question

I'm trying to change the display CSS property of a <div> tag when the user changes the value of a <select>.


Here is my HTML code :

<select type="text" name="category" onblur="display_hidden_fields();">
    <option><!-- Content --></option>
    <option><!-- Content --></option>
</select>

<div id="hidden" style="display:none;">
    <label for="test">Label</font></label>
    <select type="text" name="test">
        <option value="1">Default</option>
        <option value="2">Value1</option>
        <option value="3">Value2</option>
    </select>
</div>

(note that's a simplified version of my code. Actually, every <label> and <select> are in <td>. I think it doesn't matter)

Now, my JS code :

function display_hidden_fields()
{
    alert("JS Function");
    document.getElementById("hidden").style.display = "block";
}

Well. When I select a new <option> in the first <select> named "category", I get the alert "JS Function". So my display_hidden_fields() function is correctly executed.
But the second line of this function does... nothing ! My <div> named "hidden" is not displayed :(

It seems to me there is nothing wrong in my code. Moreover, I tried many variants.
- Like specifying style="display:block" in the <div> properties, and changing it to "none" in the JS.
- Or trying to use other properties like "inline", "inline-block", ...
- Or using "visibility" instead of "display"
- Or not specifying any property at all in the HTML.


Does anyone can help me ? :)

Thanks.

[EDIT] Important observation

I think I found something interesting. It seems that a <div> with display:none; mixed with <tr> and <td> is completely nonfunctional. Here is my real code :

<tr>
    <div id="hidden" style="display:none;">
        <td class="depot_table_left">
            <label for="sexe">Sexe</label>
        </td>
        <td>
            <select type="text" name="sexe">
                <option value="1">Sexe</option>
                <option value="2">Joueur</option>
                <option value="3">Joueuse</option>
            </select>
        </td>
    </div>
</tr>

The content of the <div> is still displayed. And I can try to change it in any way in JS, it doesn't work. I also tried to remove the <table>, <tr> and <td> tags, and it works fine. But I need this table...

Answer 1

It should be document.getElementById("hidden").style.display = "block"; not document.getElementById["hidden"].style.display = "block";

---

EDIT due to author edit:

Why are you using a <div> here? Just add an ID to the table element and add a hidden style to it. E.g. <td id="hidden" style="display:none" class="depot_table_left">

Answer 2

I found the solution.

As said in the EDIT of my answer, a <div> is misfunctioning in a <table>. So I wrote this code instead :

<tr id="hidden" style="display:none;">
    <td class="depot_table_left">
        <label for="sexe">Sexe</label>
    </td>
    <td>
        <select type="text" name="sexe">
            <option value="1">Sexe</option>
            <option value="2">Joueur</option>
            <option value="3">Joueuse</option>
        </select>
    </td>
</tr>

And this is working fine.

Thanks everybody ;)

Answer 3

CSS properties should be set by cssText property or setAttribute method.

// Set multiple styles in a single statement
elt.style.cssText = "color: blue; border: 1px solid black"; 
// Or
elt.setAttribute("style", "color:red; border: 1px solid blue;");

Styles should not be set by assigning a string directly to the style property (as in elt.style = "color: blue;"), since it is considered read-only, as the style attribute returns a CSSStyleDeclaration object which is also read-only.