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

onchange instead of onblur and ("hidden") instead of ["hidden"]? — thirtydot
– thirtydot, Commented Jan 29, 2011 at 17:38
Sorry, I'm not using [] in my code, it was just a mistake during copying. Concerning onchange, I don't see the point to use it. onblur is working since my JS function is correctly executed. — Pierre Espenan
– Pierre Espenan, Commented Jan 29, 2011 at 17:45
How on earth do you manage to change () into [] during copy/paste? I can't see anything else wrong with your code. Make a jsFiddle test case. — thirtydot
– thirtydot, Commented Jan 29, 2011 at 17:48
Anyway, I just tried onchange, and there is no other change that the normal behaviour difference between onblur and onchange. — Pierre Espenan
– Pierre Espenan, Commented Jan 29, 2011 at 17:48
I didn't copy/paste my code, I re-typed it (cause there is many french words in my code. It would be more disturbing than usefull) — Pierre Espenan
– Pierre Espenan, Commented Jan 29, 2011 at 17:50

Prisoner · Accepted Answer · 2011-01-29 18:16:01Z

50

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

edited Jan 29, 2011 at 18:16

answered Jan 29, 2011 at 17:39

Prisoner

27.7k11 gold badges77 silver badges104 bronze badges

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

3 Comments

Pierre Espenan Over a year ago

Sorry, I'm not using [] in my code, it was just a mistake during copying.

Prisoner Over a year ago

In that case the code you posted works fine for me in Chrome.

Pierre Espenan Over a year ago

I didn't see your EDIT. I just found the same solution so I answered myelf :) Anyway, I validate your answer, thanks !

Pierre Espenan · Accepted Answer · 2011-01-29 18:26:19Z

3

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

answered Jan 29, 2011 at 18:26

Pierre Espenan

4,0765 gold badges37 silver badges52 bronze badges

Comments

Andrej Gajdos · Accepted Answer · 2019-05-28 12:18:10Z

1

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.

answered May 28, 2019 at 12:18

Andrej Gajdos

8717 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to modify a CSS display property from JavaScript?

[EDIT] Important observation

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

[EDIT] Important observation

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related