CODEWITHSUNDEEP
javascripthtmlvisibility
roopa
roopa

Reputation: 75

div visibility by java script not working

I have a form in which I have kept two fields in a div. There is a check box that determines the visibility of this div MY code is not working.It is not allowing me to click on this

<script>    
  function yesnoCheck() {
    if (document.getElementById('yesCheck').checked) {
    document.getElementById('ifYes').style.visibility = 'visible';
    }
    else document.getElementById('ifYes').style.visibility = 'hidden';

    }
</script>

<input type="CHECKBOX" onclick="javascript:yesnoCheck();" name="period" id="yesCheck"> 
<label for "period" style="padding-left:20px;margin:0px;color:black;font-weight:bold;">Time </label>    

<div id="ifYes" style="visibility:hidden" >
  <label style="padding:0px;margin:0px;color:black;font-weight:bold;">Date From </label>
  <input style="padding:0px;margin:0px;" type="date" id="datefrom" name="datefrom"value="" placeholder="Date from" >
  <label style="padding:0px;margin:0px;color:black;font-weight:bold;">To</label>
  <input style="padding:0px;margin:0px;"type="date"  id="dateto" name="dateto"  value="" placeholder="Date to">
</div>

Upvotes: 2

Views: 65

Answers (2)

Thum Choon Tat
Thum Choon Tat

Reputation: 3090

The for attribute in the label accepts the element id, not the name

Reference: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#Attributes

function yesnoCheck() {
  if (document.getElementById('yesCheck').checked) {
    document.getElementById('ifYes').style.visibility = 'visible';
  } else document.getElementById('ifYes').style.visibility = 'hidden';

}
<input id="yesCheck" type="CHECKBOX" onclick="javascript:yesnoCheck();" name="period">
<label for="yesCheck" style="padding-left:20px;margin:0px;color:black;font-weight:bold;">Time </label>
<div id="ifYes" style="visibility:hidden">
  <label style="padding:0px;margin:0px;color:black;font-weight:bold;">Date From </label>
  <input style="padding:0px;margin:0px;" type="date" id="datefrom" name="datefrom" value="" placeholder="Date from">
  <label style="padding:0px;margin:0px;color:black;font-weight:bold;">To</label>
  <input style="padding:0px;margin:0px;" type="date" id="dateto" name="dateto" value="" placeholder="Date to">
</div>

Upvotes: 1

wangdev87
wangdev87

Reputation: 8751

You missed id for input tag. id="yesCheck"

function yesnoCheck() {
  if (document.getElementById('yesCheck').checked) {
    document.getElementById('ifYes').style.visibility = 'visible';
  } else document.getElementById('ifYes').style.visibility = 'hidden';

}
<input id="yesCheck" type="CHECKBOX" onclick="javascript:yesnoCheck();" name="period">
<label for "period" style="padding-left:20px;margin:0px;color:black;font-weight:bold;">Time </label>
<div id="ifYes" style="visibility:hidden">
  <label style="padding:0px;margin:0px;color:black;font-weight:bold;">Date From </label>
  <input style="padding:0px;margin:0px;" type="date" id="datefrom" name="datefrom" value="" placeholder="Date from">
  <label style="padding:0px;margin:0px;color:black;font-weight:bold;">To</label>
  <input style="padding:0px;margin:0px;" type="date" id="dateto" name="dateto" value="" placeholder="Date to">
</div>

Upvotes: 0

Related Questions