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:

  1. function name in onchange didnt match actual function name

  2. you had onload selected wrap, making function wasnt being declared in global scope.

  3. you werent using proper css selector, classes have . prefixed name, ids have # prefixed, when no period or # before name, name looked element tagname

Comments

Popular posts from this blog

basic authentication with http post params android -

vb.net - Virtual Keyboard commands -

c++ - End of file on pipe magic during open -