Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Greg Schudel
4,090 PointsCannot read property 'querySelector' of null -- No idea why
I am typing the exact code that is in the video and I am getting this error.
I have googled the error several times and have no idea what it's saying.
The input tag exists!! I don't understand the source of the error.
Uncaught TypeError: Cannot read property 'querySelector' of null
Here is my current code:
const form = document.getElementById('registrar');
const input = form.querySelector('input');
form.addEventListener('submit', (e) => {
e.preventDefault();
console.log(input.value);
});
here is my complete workspace (with HTML file and app.js file)
6 Answers
Kris Byrum
32,636 Pointsah... I see the issue.
Unless you absolutely need to, you shouldn't included any script tags inside the head. They should be included just before the closing tag of the body.
I moved the script tag to just before and it works.
Here is my snapshot for you to look at.
Kris Byrum
32,636 PointsUncaught TypeError: Cannot read property 'querySelector' of null
What this is telling you is that there is no 'querySelector' method on a null object. The object that it is trying to access that method from is the form variable and not the input.
The null object would mean that the ID of registrar is not found on the page and that the javascript getElementById method is returning undefined or null instead of the form object that you are looking for.
Hope that makes sense.
In the end, check you ID on the form to make sure you spelled it right and that there is one and only one on the page. Can only have a single ID on a page.
Greg Schudel
4,090 PointsMy code for the javascript and the HTML files are exactly as they are given in the class. Here is screenshot: https://w.trhou.se/xed53vhl18
I only have one registrar id and I have even used a different id word for the form id.
Still can't see why I am still getting that error, but find it frustrating that the error is not clear as to where the issue is.
Also, the method document.getElementById returns a value.
https://www.w3schools.com/jsref/met_document_getelementbyid.asp
Why are you saying it's an object? element.getElementsByClassName(); returns an object, correct?
https://www.w3schools.com/jsref/met_element_getelementsbyclassname.asp
Mustafa Khan
6,224 PointsPlease also show the html.
Greg Schudel
4,090 PointsLet me be clear, my code for the javascript and the HTML files are exactly as they are given in the class. Here is screenshot: https://w.trhou.se/xed53vhl18
Still can't see why I am still getting that error. I have checked my HTML file and I only have one form id
and I checked the spelling that is being called, it's correct.
Kris Byrum
32,636 PointsYou'd have to up async as a part of the script tag, BUT that also prob wouldn't work since it would start parsing and accessing the DOM as soon as it got into the browser's queue.
Jason Benson
390 PointsThank you!!!! its May 2020 during quarantine. and I have spent the last hour trying to figure out the same error.
Thank you for the answer. I was really going a little nuts wondering why isn't this working.
Sincerely. Jason
Greg Schudel
4,090 PointsGreg Schudel
4,090 PointsDAHH!!!! I thought that was not a problem considering most browsers allow for async!!
Clearly, my code is NOT correct, ::I knew it was something small I was missing, and this time it is completely MY fault! dahhhhh! ::