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