I have 2 ways of text input for the user - through an input text field, or by choosing a predefined text from a dropdown menu. Javascript controls which one is visible.So I have those 2 input methods and their corresponding 2 labels:\[code\]<h:form id="test"><div> <h
utputLabel id="label_1" value="http://stackoverflow.com/questions/13821201/Your text:" style="display:block" /> <h:inputText id="txt" value="http://stackoverflow.com/questions/13821201/#{myform.inputText}" style="display:block" /> <hutputLabel id="label_2" value="http://stackoverflow.com/questions/13821201/Choose text:" style="display:none" /> <h:selectOneMenu id="drop" value="http://stackoverflow.com/questions/13821201/#{myform.inputText}" style="display:none"> <f:selectItem itemValue="http://stackoverflow.com/questions/13821201/11" itemLabel="Preselected text 1" /> <f:selectItem itemValue="http://stackoverflow.com/questions/13821201/22" itemLabel="Preselected text 2" /> </h:selectOneMenu></div></h:form>\[/code\]The javascript shows and hides the elements:\[code\]if (...) { document.getElementById('label_1').style.display="none"; document.getElementById('txt').style.display="none"; document.getElementById('label_2').style.display="block"; document.getElementById('drop').style.display="block";}else { document.getElementById('label_1').style.display="block"; document.getElementById('txt').style.display="block"; document.getElementById('label_2').style.display="none"; document.getElementById('drop').style.display="none";}\[/code\]So, it's either label_1 + txt or label_2 + dropHere is the problem: when the page loads, only label_1 + txt should be visible. Unfortunately, label_1, label_2 and txt are visible!Why is drop's definition style="display:none" working and label_2's same definition is not?
utputLabel id="label_1" value="http://stackoverflow.com/questions/13821201/Your text:" style="display:block" /> <h:inputText id="txt" value="http://stackoverflow.com/questions/13821201/#{myform.inputText}" style="display:block" /> <hutputLabel id="label_2" value="http://stackoverflow.com/questions/13821201/Choose text:" style="display:none" /> <h:selectOneMenu id="drop" value="http://stackoverflow.com/questions/13821201/#{myform.inputText}" style="display:none"> <f:selectItem itemValue="http://stackoverflow.com/questions/13821201/11" itemLabel="Preselected text 1" /> <f:selectItem itemValue="http://stackoverflow.com/questions/13821201/22" itemLabel="Preselected text 2" /> </h:selectOneMenu></div></h:form>\[/code\]The javascript shows and hides the elements:\[code\]if (...) { document.getElementById('label_1').style.display="none"; document.getElementById('txt').style.display="none"; document.getElementById('label_2').style.display="block"; document.getElementById('drop').style.display="block";}else { document.getElementById('label_1').style.display="block"; document.getElementById('txt').style.display="block"; document.getElementById('label_2').style.display="none"; document.getElementById('drop').style.display="none";}\[/code\]So, it's either label_1 + txt or label_2 + dropHere is the problem: when the page loads, only label_1 + txt should be visible. Unfortunately, label_1, label_2 and txt are visible!Why is drop's definition style="display:none" working and label_2's same definition is not?