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

JavaScript DOM Scripting By Example Adding and Removing Names Registering Names

Greg Schudel
Greg Schudel
4,090 Points

Cannot 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
Kris Byrum
32,636 Points

ah... 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.

https://w.trhou.se/8n6o37b5go

Greg Schudel
Greg Schudel
4,090 Points

DAHH!!!! 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! ::

Kris Byrum
Kris Byrum
32,636 Points

Uncaught 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
Greg Schudel
4,090 Points

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

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

Please also show the html.

Greg Schudel
Greg Schudel
4,090 Points

Let 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
Kris Byrum
32,636 Points

You'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
Jason Benson
390 Points

Thank 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