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.
Samira Tavakolli
6,715 PointsGetting 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?
tnx
2 Answers
Caleb Kemp
12,649 PointsSo, 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
Samira Tavakolli
6,715 PointsThanks Caleb! The code runs correctly now and I learned how to interpret this error!
Caleb Kemp
12,649 PointsGlad to hear it helped!