Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript JavaScript and the DOM Making Changes to the DOM Get and Set Content with textContent and innerHTML

Getting a TypeError on this code!

I am following exact code in the video on my workspace and my text editor and I get the following error:

Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at app.js:14:11

const btnUpdate = document.querySelector('.btn-main');

btnUpdate.addEventListener('click', () => {
    const headline = document.getElementById('headline');
    const input = document.querySelector('.input-mail');

    headline.textContent = input.value;

I have downloaded and runed the course file from website and I get the same error. Would someone please explain where is the problem?


2 Answers

Caleb Kemp
Caleb Kemp
12,649 Points

So, querySelector works by searching for the given selector, and it will return the first matching element. In your code, you are setting "const input" to equal the first element returned of document.querySelector('.input-mail'); and then you call the ".value" method (headline.textContent = input.value;) on that element. But what happens if your querySelector found no match? The querySelector will return the value of null. So, when you try use the ".value" on null, it gives an error since there is no ".value" method for null. So, the reason this is failing is that your code

const input = document.querySelector('.input-mail');

cannot find any matches and returns null, causing an error when you call input.value.. You could fix this by changing this to

const input = document.querySelector('.input-main');

like in the video, or renaming your "input-main" class to "input-mail" in your html file. Hope that helps, let me know if it gives you any more trouble :smile:

Thanks Caleb! The code runs correctly now and I learned how to interpret this error!

Caleb Kemp
Caleb Kemp
12,649 Points

Glad to hear it helped! :smile: