javascript - Pure JS - display:block not working -

javascript - Pure JS - display:block not working -

i know has been asked 1000000 times swear, checked 20 posts , nil works...

this code:

when utilize clicks on "email" option, input element id of "email" should show underneath it.

html

<select> <option selected disabled>contact me by:</option> <option onclick="showinput()">email</option> </select> <input class="email" id="email" placeholder="email address" type="text" />

js

class="lang-js prettyprint-override">function showinput() { document.getelementbyid("email").style.display = "block"; }

css

class="lang-css prettyprint-override">input#email { display: none; }

could explain me how not working? have link js file before body closing tag.

use onchange event , move event handler <select> element. added value attribute <option> element create text field identification simpler. and, finally, in function, pass select element event handler , grab selected alternative select list.

<select onchange="showinput(this)"> <option selected disabled>contact me by:</option> <option value="email">email</option> </select> <input class="email" id="email" placeholder="email address" type="text" /> <script> function showinput(sel) { var opt = sel.options[sel.selectedindex].value document.getelementbyid(opt).style.display = "block" } </script>

jsfiddle

now can add together more contact options:

<select onchange="showinput(this)"> <option selected disabled>contact me by:</option> <option value="email">email</option> <option value="phone">phone</option> <option value="address">mail</option> </select> <input class="email" id="email" placeholder="email address" type="text" /> <input class="phone" id="phone" placeholder="phone number" type="text" /> <input class="address" id="address" placeholder="mailing address" type="text" />

javascript html css block