Show or Hide element in javascript

JavaScript
1

On selection of option from drop down menu need to show hidden fields…Ive written the code but its not showing …what might be the error…??

below i my Html Part

    		  <label>CUF PERFORMANCE</label>
       &nbsp&nbsp&nbsp<select id="select" name="options">
        <option>Select The Value</option>
        <option id="hourly" value="a">Hourly</option>
        <option id="daily" value="b">Daily</option>
        <option id="monthly" value="c">Monthly</option>
        <option id="yearly" value="d">Yearly</option> 
       </select><br/><br/>
     </div><br/>

    <input id="dateInput" type="date" style="display:none;">
	<input id="timeInput" type="time" style="display:none;">

below is my javascript code

       <script>
  var select=document.getElementById('select');
var wrappElement=document.getElementById('wrapper');

select.addEventListener('change',function(){
if(select.value=='a'){
	document.getElementById("dateInput").style.visibility = "visible"; 
	document.getElementById("timeInput").style.visibility = "visible"; 
}
  } , false);	  
</script>

Below is jsfiddle link

2

The HTML has set display, but the script is changing visibility? They are not one and the same.

3

@paul_wilkins…I’m using visibility prop of html…While defining tag only im hiding the date field …on selection of value in select field i want to display the hidden date field…

4

When you set the visibility, the HTML element still has its display set to none, so it will not be displayed.

5

@paul_wilkins …ive shared my jsfiddle link…please open once and share me edited code so that i can know what mistake ive done…But yesterday it was working perfectly…I forgot to save the code…

6

[quote=“pan6831, post:5, topic:259712, full:true”]
@paul_wilkins …ive shared my jsfiddle link…[/quote]

It’s as I said before. The element has its CSS property of “display” still set to none, which is why it’s not showing for you.

You need to use JavaScript to set the display to be an empty string, which will return the element back to its default display setting.

1 Like
7

@pual_wilkins…my code is working …I modified a bit …Thank u for the suggestions…

1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.