CODEWITHSUNDEEP
javascripthtml
TeaCake
TeaCake

Reputation: 57

Condtionally showing/hiding textarea with select.onchange in Javascript

I'm running up against a wall with something rather simple. I have an "Other:" option on a 'select' element that I am using as a condition for showing/hiding a 'textarea' element. I've got it mostly working despite one strange behavior: no matter what I do the 'textarea' is determined to display when the page loads, despite having 'display="none"' set. If I change to a non-'Other:' option it behaves normally and hides the textarea, and shows it when I select other. The only issue is on loading it defaults to displaying it. I'm sure this is something simple but it is utterly eluding me. Here's code:

HTML

<div id="otherbox" style="text-align:left; padding:5px; margin:0px 6px;">
<textarea display="none" name="other" id="aboutOther" rows="10" cols="30" wrap="hard">                          
</textarea>
</div>

Javascript:

<script type="text/javascript">
var slct=document.getElementById("selectMenu");
slct.onchange=function()
{
    this.value == "Other:" ? document.getElementById("aboutOther").style.display='block' : document.getElementById("aboutOther").style.display='none';
};
</script>

I included the 'div' on the textarea in case that's relevant (although I suspect it isn't). For full disclosure, that div is nested in another div. Hope that's not important.

Fullest disclosure: I don't know what I'm doing.

Upvotes: 0

Views: 83

Answers (1)

Shawn Song
Shawn Song

Reputation: 301

You need to use CSS to control the display property. Try to change display="none" to style="display:none;" in your textarea element as "display" is not a default attribute for textarea.

Upvotes: 2

Related Questions