英文:
webpage, jquery passing value lose : Uncaught TypeError: Cannot set properties of null (setting 'innerHTML')
问题
I'm trying to save the edited data while click "send message" button
here is the error message:
未捕获的类型错误：无法设置 null 的属性（设置 'innerHTML'）
似乎在说 "itemValue" 为 null，但我不确定问题出在哪里？
<script>
var storedItem = localStorage.getItem("storedItem");
function save() {
var itemValue = document.getElementById("input_edit_data").value;
localStorage.setItem("storedItem", itemValue);
document.getElementById("savedText").innerHTML = itemValue;
console.log("storedItem", storedItem);
}
</script>
我是新来的，认为大家都是优秀的专家，也许我能得到一些很酷的反馈，谢谢。
英文:
I'm trying to save the edited data while click "send message" button
here is the error message:
> Uncaught TypeError: Cannot set properties of null (setting
> 'innerHTML')
seems saying "itemValue" is none, but I'm not sure where get problem?
<script>
var storedItem = localStorage.getItem("storedItem");
function save() {
var itemValue = document.getElementById("input_edit_data").value;
localStorage.setItem("storedItem", itemValue);
document.getElementById("savedText").innerHTML = itemValue;
console.log("storedItem", storedItem);
}
</script>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">device_id:</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">name:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="field1" class="col-form-label">group:</label>
<input type="text" class="form-control" id="input_edit_data">
</div>
<div class="form-group">
<label for="field2" class="col-form-label">id :</label>
<input type="text" class="form-control" id="input_edit_data">
</div>
<!-- End of additional form fields -->
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="save()">Send message</button>
</div>
</div>
</div>
</div>
I'm new to this community, thinking of everyone is excellent experts, maybe I can get a cool feedback, thanks
- the full version of code, in case needed
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta tags and other head elements -->
<title>Static Template</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
</head>
<body>
</html>
<div id="app"></div>
<table id="example" class="display"></table>
<!-- JavaScript libraries -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script>
var storedItem = localStorage.getItem("storedItem");
function save() {
var itemValue = document.getElementById("input_edit_data").value;
localStorage.setItem("storedItem", itemValue);
document.getElementById("savedText").innerHTML = itemValue;
console.log("storedItem", storedItem);
}
</script>
<script>
$(document).ready(function () {
const getToken = localStorage.getItem("token")
console.log("GET TOKEN", getToken)
var table = $("#example").DataTable({
ajax: {
url: "http://192.168.01.10:8000/api/item_status",
headers: {
'Authorization': 'Bearer ' + getToken
},
dataSrc: function (response) {
console.log("DATA", response.ipcs);
return response.ipcs
}
},
columns: [
{
data: null,
title: "ACTION",
render: function (data, type, row) {
return '<button class="btn btn-primary btn-sm edit-btn" data-id="' + row.device_id + '">Edit</button>' +
'<button class="btn btn-danger btn-sm delete-btn" data-id="' + row.device_id + '">Delete</button>';
}
},
{
data: null,
title: "edit",
render: function (data, type, row) {
return'<button class="btn btn-success btn-sm" data-id="1" data-toggle="modal" data-target="#exampleModal">Edit</button> ';
}
},
{
data: null,
title: "edit_new",
render: function (data, type, row) {
return'<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever=" ">edit_new</button>';
}
},
{ data: "device_id", title: "device_id" },
{ data: "device_id", title: "device_id" },
{ data: "name", title: "name" },
{ data: "group", title: "group" },
{ data: "ip", title: "ip" },
]
});
table.draw()
var rowData;
$('#example tbody').on('click', 'button', function (event) {
var data = table.row($(this).parents('tr')).data();
rowData = data;
console.log("GET edit DATA", data)
});
$(function(){
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var recipient = button.data('whatever');
var data = rowData;
var modal = $(this);
modal.find('.modal-title').text('Update data ' + recipient);
var inputFields = modal.find('.modal-body input');
var keys = Object.keys(data);
for (var i = 0; i < inputFields.length; i++) {
var inputValue = data[keys[i]];
$(inputFields[i]).val(inputValue);
}
});
});
function editRow_website(id){
var device_id=document.getElementById("device_id"+id);
var name=document.getElementById("name"+id);
var group=document.getElementById("group"+id);
var ip=document.getElementById("ip"+id);
let getEditData = {
"device_id": device_id,
"email_data": name,
"address_data": group,
"name_data": ip,
}
document.getElementById("#editid input").value = device_id
}
$(document).on('click', '.delete-btn', function (event) {
var id = $(this).data('id')
console.log("GET DLETE ID", id)
confirmDelete(id)
});
function deleteData(id) {
$.ajax({
url: "http://192.168.01.10:8000/api/item_status="+ id,
type:'DELETE',
headers: {
'Authorization': 'Bearer ' + getToken
},
success: function(response){
console.log(response);
}
}).then(res => console.log("RES", res));
}
function editRow(id) {
console.log("EDIT", getFinalData);
}
function confirmDelete(id) {
if (confirm("sure to delete this row？")== true) {
var table = $("#example").DataTable();
var row = table.row($(this).closest('tr'));
deleteData(id);
if (row.length > 0) {
row.remove().draw();
console.log("Delete row with id:", id);
}
} else{
none
}
}
});
</script>
<script src="script.js"></script>
<div class ="table-title">
<div class="row">
<div class="col-sm-4">
<button type="button" class="btn btn-info add-new"><i class="fa fa-plus"></i>Add New</button>
</div>
</div>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">device_id:</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="col-form-label">name:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="field1" class="col-form-label">group:</label>
<input type="text" class="form-control" id="input_edit_data">
</div>
<div class="form-group">
<label for="field2" class="col-form-label">id :</label>
<input type="text" class="form-control" id="input_edit_data">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" onclick="save()">Send message</button>
</div>
</div>
</div>
</div>
<script>
$(function() {
$('#exampleModal').on('show.bs.modal', function(e) {
$('.modalTextInput').val('');
let btn = $(e.relatedTarget); // e.related here is the element that opened the modal, specifically the row button
let id = btn.data('id'); // this is how you get the of any `data` attribute of an element
$('.saveEdit').data('id', id); // then pass it to the button inside the modal
})
$('.saveEdit').on('click', function() {
let id = $(this).data('id'); // the rest is just the same
saveNote(id);
$('#exampleModal').modal('toggle'); // this is to close the modal after clicking the modal button
})
})
function saveNote(id) {
let text = $('.modalTextInput').val();
$('.recentNote').data('note', text);
console.log($('.recentNote').data('note'));
console.log(text + ' --> ' + id);
}
</script>
</body>
</html>
答案1
得分: -2
document.getElementById("savedText") 返回 null，因此它没有 innerHTML 可以引用。
你可以将
document.getElementById("savedText").innerHTML = itemValue;
改为
let savedText = document.getElementById("savedText");
if (savedText) {
savedText.innerHTML = itemValue;
}
这样会检查元素是否被找到，并且只有在元素存在时才设置它的 innerHTML，以防止错误发生。
但是你的元素之所以缺失是有原因的，你需要找出为什么。可能是你根本就没有这样的元素，根据你分享的代码，似乎是这种情况，其中没有这样的标签，或者在 Javascript 评估时未加载该元素。
英文:
document.getElementById("savedText") returns null, so it does not have an innerHTML to refer to.
You can change
document.getElementById("savedText").innerHTML = itemValue;
to
let savedText = document.getElementById("savedText");
if (savedText) {
savedText.innerHTML = itemValue;
}
That would check whether the element was found and only set its innerHTML if it exists to prevent the error from occurring.
But your element is missing for a reason and you will need to find out why. You either do not have such an element at all, which seems to be the case based on the code you have shared, where no such tag exists, or it was not loaded when your Javascript evaluates.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论