javascript - Document.getElementById(...) 在 Laravel 视图中为 Null
问题描述
控制台中的消息
类型错误:document.getElementById(...) 为空。
刀片(包含一个删除按钮)
<td>
<a href="#" class="btn btn-primary btn-sm"><i class="fa fa-pencil"></i></a>
<button type="button" class="btn btn-danger btn-sm"
onclick="deleteSaleItem({{ $sale->id }})">
i class="fa fa-trash"></i>
</button>
<form id="delete-form-{{ $sale->id }}" action="{{ route('secretary.sales.destroy.item',$sale->id) }}" method="POST"
style="display:none;">
@csrf
@method('DELETE')
</form>
</td>
Javascript 实现
<script>
function deleteSaleItem(id){
const swalWithBootstrapButtons = swal.mixin({
confirmButtonClass: 'btn btn-success',
cancelButtonClass: 'btn btn-danger',
buttonsStyling: false,
})
swalWithBootstrapButtons({
title: 'Are you sure?',
text: "You won't be able to revert this!",
type: 'warning',
showCancelButton: true,
confirmButtonText: 'Yes, delete it!',
cancelButtonText: 'No, cancel!',
reverseButtons: true
}).then((result) => {
if (result.value) {
event.preventDefault();
document.getElementById('delete-form-'+id).submit();
} else if (
// Read more about handling dismissals
result.dismiss === swal.DismissReason.cancel
) {
swalWithBootstrapButtons(
'Cancelled',
'Your data is safe :)',
'error'
)
}
})
}
</script>
我需要知道这段代码有什么问题导致空值。谢谢你。
解决方案
您的代码中只有一个 getElementById。
document.getElementById('delete-form-'+id)
因此,可能是“id”变量为空或为空,而您检索的元素变为空。
尝试在 document.getElementById 代码之前调试或 console.log 你的“id”变量,看看你的变量会发生什么。
推荐阅读
- makefile - 如何在定义 makefile 中避免 bash for 循环的变量扩展
- unit-testing - Marble 用茉莉花大理石测试受试者随时间的行为
- ruby - 在 RubyMine 中对齐 Ruby 的多个方法调用
- django - Django all auth:如何覆盖确认电子邮件网址
- database - 如何在 Python 中为数据库创建存根?
- reactjs - 使用服务器删除本地缓存
- python - 熊猫 style.background_gradient 忽略 NaN
- angularjs - 值如何在 indexOf() 中传递?
- javascript - 如何让 node.js 控制台在 Visual Studio 2017 中暂停?
- java - 来自 Spring Boot/Angular 应用程序的密码更新