Issue
In the index.html page I have the following code
<body>
<h1>First page</h1>
<button id="submitBtn">Submit</button>
<script src="script.js"></script>
</body>
The JS is a simple script that redirects the page to another page - second.html
document.getElementById('submitBtn').addEventListener('click', function(e) {
e.preventDefault();
window.location.href = 'another_file.html';
})
Once the second page is loaded, the console gives - TypeError: Cannot read properties of null (reading 'addEventListener'). This is understandable as the next page doesn't have the submitBtn.
How can I avoid this error?
Thanks
Solution
You can check if it exists before attaching events to it.
var elem = document.getElementById('submitBtn');
elem && elem.addEventListener('click', function(e) {
e.preventDefault();
window.location.href = 'another_file.html';
})As for your design decision the way I would structure it indeed use script.js for all the functions and the only difference is between the pages which own has a minimal <script> tag to initialize and insatiate its own stuff.
So for this instance, while both share the same script.js, only index.html page would include this snippet of code inside of it. and second.html should not bother at all with checking for that element.
Answered By - IT goldman Answer Checked By - Terry (PHPFixing Volunteer)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.