ТипError: document.getElementById (...) is null - Сообщение об ошибке

Question

Здесь я скрываю тег div при изменении выпадающего меню. Но когда я выбираю любое значение из выпадающего списка, сообщение отображается,

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

Вот мой код:

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> 

Обновлено

Answer 1

2 Проблемы;

1. вы должны определить leave_type, прежде чем использовать его в качестве условия
2. document.getElementByName("leavetype")

Не будет работать, если не является элементом формы с name="leavetype", если вы хотите выбрать по ID, используйте ;

document.getElementByID("leavetype") 

Answer 2

Попробуйте это: вы можете использовать JQuery здесь, чтобы скрыть и показать DIV см ниже код

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

Answer 3

Вам нужно изменить две вещи, которые используют data-* атрибут опций:

<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> 

Теперь вы можете использовать этот скрипт:

$('.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

Это может быть, что вы не ждете DOM, чтобы быть полностью загружен, прежде чем запрашивать один из его элементов.

Чистый раствор JS:

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

, но так как вы уже используете JQuery или вы могли бы поместить в $ (документ) .ready() и использовать раствор @Bhushan Kawadkar для запроса элемента:

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