javascript - Dropdown menu choice hides fields through class -
i have dropdown menu, when value chosen hides/ shows fields, because of php code behind need use class choose it.
i wondering if theres way add padding when hiding , showing fields.
i tried using "document.getelementsbyclassname("classname");
" couldn't working.
html:
<select id="form" onchange="changedropdowns(this.value);"> <option value="hide">hide</option> <option value="show">show</option> </select> <input type="text" id="testfield" class="testfield" />
javascript:
function changedropdowns(value) { if (value == "show") { document.getelementbyid('testfield').style.display = 'none'; } else if (value == "hide") { document.getelementbyid('testfield').style.display = 'block'; } }
you using queryselectorall function wrong, returns array of elements, if want single element use queryselector
in case looks thats want.
html
<input type="text" id="testfield" class="testfield2"/>
js
//uses class, period needs before class name, when selecting class document.queryselector(".testfield2").style.display='none'; //uses id, # needs before id name, when selecting id document.queryselector("#testfield").style.display='none';
when using queryselectorall return array, have access such
var elements = document.queryselectorall(".testfield"); elements[0].style.display='none';
your fiddle had couple errors:
function name in onchange didnt match actual function name
you had
onload
selected wrap, making function wasnt being declared in global scope.- you werent using proper css selector, classes have
.
prefixed name, ids have#
prefixed, when no period or # before name, name looked element tagname
Comments
Post a Comment