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">×</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
<!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">×</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>
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.