TypeError: document.getElementById(..）为 null - 错误消息 - TypeError: document.getElementById(...) is null - Error Message

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

在这里，我在更改下拉菜单时隐藏了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>

更新

2 个问题;

在将其用作条件之前，应定义leave_type
document.getElementByName("leavetype")

除非有一个带有 name="leavetype" 的表单元素，否则不会起作用，如果要按 ID 选择，请使用;

document.getElementByID("leavetype")

试试这个：你可以在这里使用 jQuery 来隐藏和显示div，见下面的代码

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

可能是您在请求其元素之一之前没有等待 DOM 完全加载。

纯JS解决方案：

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

但是由于您已经在使用 jQuery，或者您可以放入 $（document）.ready（）并使用@Bhushan Kawadkar 解决方案来请求元素：

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

您需要更改两件事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>

TypeError: document.getElementById(..） 为 null - 错误消息

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

TypeError: document.getElementById(..）为 null - 错误消息