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 JavaScript and the DOM Making Changes to the DOM Get and Set Content with textContent and innerHTML

Posted by Samira Tavakolli
Samira Tavakolli
6,715 Points

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?

tnx

3 Answers

Caleb Kemp
Caleb Kemp
12,754 Points
Caleb Kemp
Caleb Kemp
12,754 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:

Samira Tavakolli
Samira Tavakolli
6,715 Points
Samira Tavakolli
Samira Tavakolli
6,715 Points

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

Caleb Kemp
Caleb Kemp
12,754 Points
Caleb Kemp
Caleb Kemp
12,754 Points

Glad to hear it helped! :smile:

boi
boi
14,241 Points
boi
boi
14,241 Points

You have two errors in your code. 

const btnUpdate = document.querySelector('.btn-main');  👈 // Here, .btn-main is an ID not a Class

btnUpdate.addEventListener('click', () => {
    const headline = document.getElementById('headline');
    const input = document.querySelector('.input-mail'); 👈 // Here, spelling error! it's "main" not "mail"

    headline.textContent = input.value;
  });

The "eventListener" type error showing here is referring to the first error

Doctor Caleb misdiagnosed the problem but your code works? 🤨 (No hard feelings Doctor Caleb ❤ )