Uncaught TypeError: Cannot read property addEventListener of null
Question
Im working on an assignment for my javascript class, and I keep getting the error
fetch_page.js:109 Uncaught TypeError: Cannot read property 'addEventListener' of null at addEventListeners (fetch_page.js:109) at fetch_page.js:121
I'll be honost, I don't understand javascript for crap, but I'm forced to take this class for my.network admin degree. Can anyone point out where I'm making this error?
window.addEventListener('DOMContentLoaded', (function() { var contents; var protocol; var hostname; var directory; var file; function parseBase() { var pos, slashPos; var remainder; pos = BASE.indexOf('://'); protocol = BASE.substr(0, pos); remainder = BASE.substr(pos + 3); slashPos = remainder.indexOf('/'); if (slashPos === -1) { hostname = remainder; directory = ""; file = ""; } else { hostname = remainder.substr(0, slashPos); remainder = remainder.substr(slashPos + 1); slashPos = remainder.lastIndexOf('/'); if (slashPos === -1) { directory = ""; file = remainder; } else { directory = remainder.substr(0, slashPos); file = remainder.substr(slashPos + 1); } } console.log("protocol:", protocol); console.log("hostname:", hostname); console.log("directory:", directory); console.log("file:", file); } function relativeToAbsolute(url) { if (url.indexOf('://') > -1) { // http://somedomain.com/path/file.html return url; } else if (url[0] === '/') { // /path/file.html return protocol + "://" + hostname + url; } else { // path/file.html if (directory === "") { return protocol + "://" + hostname + "/" + url; } else { return protocol + "://" + hostname + "/" + directory + "/" + url; } } } function parsePage() { var parser = new DOMParser(); contents = parser.parseFromString(atob(PAGE), "text/html"); console.log(contents); } function moveChildren(source, destination) { while (source.childNodes.length > 0) { var child = source.childNodes[0]; source.removeChild(child); destination.appendChild(child); } } function fixTags(tagName, attribute) { var tags = contents.getElementsByTagName(tagName); for (var counter = 0; counter < tags.length; counter++) { var url = tags[counter].getAttribute(attribute); if (url) { tags[counter].setAttribute(attribute, relativeToAbsolute(url)); } } } function fixRedirectedTags(tagName, attribute) { var tags = contents.getElementsByTagName(tagName); for (var counter = 0; counter < tags.length; counter++) { var url = tags[counter].getAttribute(attribute); if (url) { tags[counter].setAttribute(attribute, window.location.origin + window.location.pathname + '?url=' + encodeURIComponent(relativeToAbsolute(url))); } } } function fixURLs() { fixTags('img', 'src'); fixTags('script', 'src'); fixTags('link', 'href'); fixRedirectedTags('a', 'href'); } function moveContent() { moveChildren(contents.head, document.head); moveChildren(contents.body, document.getElementById('contents')); } function submit() { console.log("submitted:", encodeURIComponent(document.getElementById('urlBox').value)); } function addEventListeners() { document.getElementById('goButton').addEventListener('click', submit); document.getElementById('urlBox').addEventListener('keydown', function(event) { if (event.keyCode == 13 || event.keyCode == 10) { submit(); } }); } return function() { parseBase(); parsePage(); fixURLs(); moveContent(); addEventListeners(); } })())
body { margin: 0px; } #searchBox { background: black; color: white; width: 100%; text-align: center; vertical-align: middle; padding: 10px; } #goButton { background: red; color: black; padding: 4px font-weight: bold; font-family: Arial; font-size: .75em; vertical-align: middle; cursor: pointer; } #urlBox { width: 50% } #contents { border: 1px solid black; }
<?php $url = isset ($_GET['url'])? $_GET['url']: "http://eloquentjavascript.net/"; $contents = base64_encode(mb_convert_encoding(file_get_contents($url), "HTML-ENTITIES","UTF-8")); ?> <.doctype html> <html> <head> <title>Fetch Page</title> <link rel="stylesheet" href="fetch_page.css"> <script src="fetch_page?js"></script> <script> var BASE = "<;php echo $url? ;>"? var PAGE = "<;php echo $contents? ;>": </script> </head> <body> <div id="searchBox">Type a URL here: <input type="text" id=urlBox"> <span id="goButton">GO</span></div> <div id="tocContainer"> <div id="toc">[toc goes here]</div> <p id="contents">Hello World!</p> <div id="contents"></div> </body> </html>
6 answers
solution1
2 2019-11-14 18:49:44
What does your error mean?
Uncaught TypeError: Cannot read property 'addEventListener' of null. at addEventListeners
That boils down to:
You've tried to access the addEventListener property of something in the addEventListeners function, but that's null .
Take a look at addEventListeners :
document.getElementById('goButton').addEventListener('click', submit);
document.getElementById('urlBox').addEventListener('keydown', function(event) {
if (event.keyCode == 13 || event.keyCode == 10) {
submit();
}
});
One of the getElementsById calls has returned null, indicating that there's no such ID in your code.
After looking at the HTML, you can see that the problem is at the following place:
<input type="text" id=urlBox">
You're missing the opening quote at the ID, so really you've given your element the ID of urlBox" (you can omit quotes around a HTML attribute, but not recommended though).
That's why the JS can't find the element with ID urlBox
solution2
1 2021-02-26 13:54:11
Just experienced something similar. Adding a defer to my script tag solved the issue:
<script src="fetch_page.js" defer></script>
Good luck! ~E
solution3
0 2019-11-14 18:40:33
One of these two document.getElementById calls is returning null, because there's no element with that Id. You can add a breakpoint in the debug console in the code, or add a console.log to figure out exactly where the problem is occuring
document.getElementById('goButton').addEventListener('click', submit);
document.getElementById('urlBox').addEventListener('keydown', function(event) {
solution4
0 2021-04-04 21:03:28
Apart from any typing error like eg. omitting quotes, try defer in the <script src... line of the html code. I solved my problem in this way!
solution5
0 2021-11-17 20:33:10
I had this problem too and I checked my code and everything was in other. I realized that it was where I positioned my script tag ie the head of the html file so I then put it at the end of my body tag. I also found out that from one of the guys who answered this question that using "defer" makes it work no matter where the script tag is as long as it's inside the html tag.
solution6
0 2023-02-03 20:42:07
Add window.onload = function() {<enter your javascript code here}; to your script. That easy.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.