Javascript hide show object <p>This code doesn't work, why?</p> <pre><code>&lt;script&gt; function color(color_type){ if (color_type == 'blue'){ document.getElementById('blue').style.display = 'block'; document.getElementById('red').style.display = 'none'; } else{ document.getElementById('blue').style.display = 'none'; document.getElementById('red').style.display = 'block'; } } &lt;/script&gt; &lt;select onchange="color(this.value)"&gt; &lt;option name="choice1" value="red" &gt;red&lt;/option&gt; &lt;option name="choice2" value="blue" &gt;blue&lt;/option&gt; &lt;/select&gt; &lt;div id="red" style="display:none;"&gt; &lt;? // echo "&lt;tr&gt; &lt;td width='100' class='tbl'&gt;Just ask&lt;/td&gt; &lt;td width='80%' class='tbl'&gt;&lt;input type='text' name='1' value='$n1' class='textbox' style='width: 250px'&gt;&lt;/td&gt; &lt;/tr&gt;"; // ?&gt; &lt;/div&gt; &lt;div id="blue" style="display:none;"&gt; &lt;? // echo "&lt;tr&gt; &lt;td width='100' class='tbl'&gt;Just ask blue&lt;/td&gt; &lt;td width='80%' class='tbl'&gt;&lt;input type='text' name='2' value='$n2' class='textbox' style='width: 250px'&gt;&lt;/td&gt; &lt;/tr&gt;"; // ?&gt; &lt;/div&gt; </code></pre> <p>Td table doesn't hidden, every time show this table. I need that when I chose blue or red show only "Just ask blue" or "Just ask" table.</p> <p>P.S sorry for my bad english language </p>