TypeError: document.getElementById(…) is null - Error Message

Question

Here, I am hiding the div tag while change of dropdown menu. But when I select any value from dropdown, the message displayed as,

TypeError: document.getElementById(...) is null
document.getElementById("leavetype").style.visibility = "hidden";

Here is my code:

var leave_type = $(this).attr('data_type');
    $('.status_approve').change(function() {
      if (leave_type == '4') {
        document.getElementByName("leavetype").style.visibility = "visible";
      } else {
        document.getElementById("leavetype").style.visibility = "hidden";
      }
    });

<div class="form-group" id="leavetype">
  <label class="col-lg-4 control-label">Emergency leave status</label>
  <div class="col-lg-8">
    <select name="emergencyleavestatus" id="emergencyleavestatus" class="form-control">
      <option value="0">Unpaid</option>
      <option value="1">Paid</option>
    </select>
  </div>
</div>
<select class="status_approve" data_type="<?php echo $row->leavetype_id;?>">
  <option value="">Select Action</option>
  <option value="1" <?php if($row->hr_approve=="1"){echo 'selected="selected"';} ?>>Approve</option>
  <option value="2" <?php if($row->hr_approve=="2"){echo 'selected="selected"';} ?>>Reject</option>
</select>

Updated

Answer 1

2 Problems;

1. you should define leave_type before you use it as a condition
2. document.getElementByName("leavetype")

Is not going to work unless there is a form element with name="leavetype" , if you want to select by ID, use;

document.getElementByID("leavetype")

Answer 2

Try this : you can use jQuery here to hide and show div, see below code

$('.status_approve').change(function(){
      var leave_type = $(this).attr('data_type');
      if(leave_type == '4')
      {
         $("#leavetype").show();
       }
      else
      {
        $("#leavetype").hide();
       }
 });

Answer 3

You need to change two things use data-* attribute on options:

<select class="status_approve">
  <option value="">Select Action</option>
  <option value="1" data-type="1">Approve</option> <!-- here -->
  <option value="2" data-type="4">Reject</option> <!-- here -->
</select>

Now you can use this script:

 $('.status_approve').change(function() { var leave_type = $(':selected', this).data('type'); $("#leavetype").toggle(leave_type == '4'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="form-group" id="leavetype"> <label class="col-lg-4 control-label">Emergency leave status</label> <div class="col-lg-8"> <select name="emergencyleavestatus" id="emergencyleavestatus" class="form-control"> <option value="0">Unpaid</option> <option value="1">Paid</option> </select> </div> </div> <select class="status_approve"> <option value="">Select Action</option> <option value="1" data-type="1">Approve</option> <option value="2" data-type="4">Reject</option> </select> 

Answer 4

It could be that you're not waiting for the DOM to be fully loaded before requesting one of its elements.

Pure JS solution:

document.addEventListener('DOMContentLoaded', function(){ 
   // your JS here
}, false);

but since you're already using jQuery or you could put into a $(document).ready() and use @Bhushan Kawadkar solution for requesting an element:

$(function() {
   // your JS here
});