Databases
StackOverflow2013
Postsdbo
POvisibility property not working as expected in javascript function
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POvisibility property not working as expected in javascript function
    text
    copied!<p>I have a table:</p> <pre><code>&lt;table&gt; &lt;tr&gt; &lt;td colspan="2"&gt;&lt;h2&gt;Order Awards here:&lt;/h2&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td class="aocBlack"&gt;Delivery:&lt;/td&gt; &lt;td&gt; &lt;select style="width: 200px;" id="deliveryMethod" name="deliveryMethod" size="1" onchange="showMailing()"&gt; &lt;option value="print"&gt;I will print it myself.&lt;/option&gt; &lt;option value="mail"&gt;Please mail it to me.&lt;/option&gt;&lt;/select&gt; &lt;/td&gt; &lt;/tr&gt; &lt;tr id="messageText" style=""&gt; &lt;td class="aocBlack" colspan="2"&gt;Message to appear on card:&lt;/td&gt; &lt;/tr&gt; &lt;tr id="messageText2" style=""&gt; &lt;td colspan="2"&gt;&lt;textarea id="certMessage" name="certMessage" rows="5" cols="10" style="width: 284px;"&gt;&lt;/textarea&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; </code></pre> <p>When the select box called deliveryMethod is set to "print", the following two table rows (id messageText and messageText2) should be visible. When it's set to "mail", they should be hidden. I have some javascript that's worked before with no problem, but the id's I was targeting before were always divs. I don't know if table rows behave differently, but I'm getting some strange results. Here's the JS:</p> <pre><code>function showMailing(){ e = document.getElementById("deliveryMethod"); eVal = e.options[e.selectedIndex].value; if (eVal == "mail"){ document.getElementById("messageText").style.display="none"; document.getElementById("messageText2").style.display="none"; }else{ document.getElementById("messageText").style.display="inline"; document.getElementById("messageText2").style.display="inline"; } } </code></pre> <p>The results are somewhat strange, to my (admittedly javascript/css-rusty) eyes. For example, when the page initially loads, everything displays as it's supposed to: the dropdown's default value is "print", and so the two table rows in question display. When you change the dropdown to "mail", they both disappear. But when you change it back, the fields are all pushed over out of where they're supposed to be. These results are consistent across FF and Chrome (strangely it works correctly in IE) so I have to assume I'm doing something wrong, but I don't know what.</p> <p>Here are some screenshots (note there are a few fields displayed in the screenshot that I've stripped out of the code shown here just for clarity.) Can anyone help me out here?</p> <p>On initial load:</p> <p><img src="https://i.stack.imgur.com/DSGGH.png" alt="alt text"></p> <p>After changing from print to mail:</p> <p><img src="https://i.stack.imgur.com/JGfB4.png" alt="alt text"></p> <p>After changing back from mail to print:</p> <p><img src="https://i.stack.imgur.com/BKLHX.png" alt="alt text"></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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