Issue
Hi i have 2 html file popup.html and popup_error.html
i have added div in popup_error.html to another div called inner-body in popup.html
but when i tried to access and edit the div that is linked from popup_error.html it throw an error TypeError: Cannot set properties of null (setting 'innerText').
i guessed it the DOM may not be fully loaded so i tried document.getElementById('inner-body').addEventListener('DOMContentLoaded', function() {} but this function throws an error Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
Currently my code below is able to add and display div from popup_error.html on popup.html but only unable to edit the div error-code text
Any advice will be greatly appreciated!
My code:
popup.js
/*Set div innerbody of popup.html to popup_error.html*/
document.getElementById('inner-body').innerHTML = '<object style="height: 100%" type="text/html" data="../layout/popup_error.html" ></object>'
/*Set error-code*/
document.getElementById("error-code").innerText="404 Not found" //Failed
popup.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../styles/popup.css"
<script src="../scripts/popup.js"></script>
</head>
<body>
<div id="inner-body">
<div id="header-3"> Loading...</div>
<div id="text-1">Getting information</div>
</div>
</body>
</html>
popup_error.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../styles/popup.css">
<script src="../scripts/popup.js"></script>
</head>
<body>
<div id="error-code">Error: Code</div>
</body>
</html>
Solution
It seems like the issue is related to the timing of when you are trying to access and modify elements in the DOM. When you set the innerHTML of the inner-body div to the content of popup_error.html, the content is loaded asynchronously. So, when you try to access the error-code element immediately after setting the innerHTML, it may not be available in the DOM yet. You can use the load event on the object element to know when the content has been fully loaded. Here's how you can modify your code
// Set div innerbody of popup.html to popup_error.html
var innerBody = document.getElementById('inner-body');
innerBody.innerHTML = '<object style="height: 100%" type="text/html"
data="../layout/popup_error.html"></object>';
// Wait for the content to be fully loaded
var objectElement = innerBody.querySelector('object');
objectElement.addEventListener('load', function() {
// Now the content is fully loaded, you can access and modify elements
var errorCodeElement =
objectElement.contentDocument.getElementById('error-code');
errorCodeElement.innerText = "404 Not found";
});
This way, you are waiting for the content inside the object element to be fully loaded before attempting to access and modify the error-code element. The load event ensures that the content has been loaded, and then you can safely manipulate the DOM inside the loaded content.
Answered By - Mohan Sharma
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.