Databases
StackOverflow2013
Postsdbo
POHow to modify a CSS display property from JavaScript?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to modify a CSS display property from JavaScript?
    primarykey
    data
    text
    <p>I'm trying to change the display CSS property of a <code>&lt;div&gt;</code> tag when the user changes the value of a <code>&lt;select&gt;</code>.<br> <br /><br /> Here is my HTML code :</p> <pre><code>&lt;select type="text" name="category" onblur="display_hidden_fields();"&gt; &lt;option&gt;&lt;!-- Content --&gt;&lt;/option&gt; &lt;option&gt;&lt;!-- Content --&gt;&lt;/option&gt; &lt;/select&gt; &lt;div id="hidden" style="display:none;"&gt; &lt;label for="test"&gt;Label&lt;/font&gt;&lt;/label&gt; &lt;select type="text" name="test"&gt; &lt;option value="1"&gt;Default&lt;/option&gt; &lt;option value="2"&gt;Value1&lt;/option&gt; &lt;option value="3"&gt;Value2&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; </code></pre> <p>(note that's a simplified version of my code. Actually, every <code>&lt;label&gt;</code> and <code>&lt;select&gt;</code> are in <code>&lt;td&gt;</code>. I think it doesn't matter) <br /><br /></p> <p>Now, my JS code :</p> <pre><code>function display_hidden_fields() { alert("JS Function"); document.getElementById("hidden").style.display = "block"; } </code></pre> <p><br /><br /> Well. When I select a new <code>&lt;option&gt;</code> in the first <code>&lt;select&gt;</code> named "category", I get the alert "JS Function". So my <code>display_hidden_fields()</code> function is correctly executed.<br> But the second line of this function does... nothing ! My <code>&lt;div&gt;</code> named "hidden" is not displayed :(</p> <p>It seems to me there is nothing wrong in my code. Moreover, I tried many variants.<br> - Like specifying <code>style="display:block"</code> in the <code>&lt;div&gt;</code> properties, and changing it to "none" in the JS.<br> - Or trying to use other properties like "inline", "inline-block", ...<br> - Or using "visibility" instead of "display"<br> - Or not specifying any property at all in the HTML.<br> <br /><br /> Does anyone can help me ? :)</p> <p>Thanks. <br /><br /></p> <h2>[EDIT] Important observation</h2> <p>I think I found something interesting. It seems that a <code>&lt;div&gt;</code> with <code>display:none;</code> mixed with <code>&lt;tr&gt;</code> and <code>&lt;td&gt;</code> is completely nonfunctional. Here is my real code :</p> <pre><code>&lt;tr&gt; &lt;div id="hidden" style="display:none;"&gt; &lt;td class="depot_table_left"&gt; &lt;label for="sexe"&gt;Sexe&lt;/label&gt; &lt;/td&gt; &lt;td&gt; &lt;select type="text" name="sexe"&gt; &lt;option value="1"&gt;Sexe&lt;/option&gt; &lt;option value="2"&gt;Joueur&lt;/option&gt; &lt;option value="3"&gt;Joueuse&lt;/option&gt; &lt;/select&gt; &lt;/td&gt; &lt;/div&gt; &lt;/tr&gt; </code></pre> <p>The content of the <code>&lt;div&gt;</code> 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 <code>&lt;table&gt;</code>, <code>&lt;tr&gt;</code> and <code>&lt;td&gt;</code> tags, and it works fine. But I need this table...</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USPierre Espenan
    1. USPierre Espenan
    plurals
    1. This table or related slice is empty.
    1. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to modify a CSS display property from JavaScript?
      1. USstephenmurdoch
      1. VTFavorite
    2. VO
      singulars
      1. POHow to modify a CSS display property from JavaScript?
      1. This table or related slice is empty.
      1. VTUpMod
    3. VO
      singulars
      1. POHow to modify a CSS display property from JavaScript?
      1. This table or related slice is empty.
      1. VTUpMod
    1. CO`onchange` instead of `onblur` and `("hidden")` instead of `["hidden"]`?
      singulars
      1. POHow to modify a CSS display property from JavaScript?
      1. USthirtydot
    2. COSorry, 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.
      singulars
      1. POHow to modify a CSS display property from JavaScript?
      1. USPierre Espenan
    3. COHow on earth do you manage to change `()` into `[]` during copy/paste? I can't see anything else wrong with your code. Make a [jsFiddle](http://jsfiddle.net) test case.
      singulars
      1. POHow to modify a CSS display property from JavaScript?
      1. USthirtydot
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload