[英]TypeError: document.getElementById(…) is null - Error Message
Here, I am hiding the div tag while change of dropdown menu. 在这里,我在更改下拉菜单时隐藏了div标签。 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 更新
2 Problems; 2个问题;
leave_type
before you use it as a condition leave_type
然后再将其用作条件 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; 除非有一个带有
name="leavetype"
的表单元素,否则name="leavetype"
,如果您想按ID选择,请使用;
document.getElementByID("leavetype")
Try this : you can use jQuery here to hide and show div, see below code 试试看:您可以在此处使用jQuery来隐藏和显示div,请参见以下代码
$('.status_approve').change(function(){
var leave_type = $(this).attr('data_type');
if(leave_type == '4')
{
$("#leavetype").show();
}
else
{
$("#leavetype").hide();
}
});
You need to change two things use data-*
attribute on options: 您需要使用选项上的
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>
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>
It could be that you're not waiting for the DOM to be fully loaded before requesting one of its elements. 可能是您在请求DOM元素之一之前没有等待DOM完全加载。
Pure JS solution: 纯JS解决方案:
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: 但由于您已经在使用jQuery,或者可以放入$(document).ready()并使用@Bhushan Kawadkar解决方案来请求元素:
$(function() {
// your JS here
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.