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.

HTML

Uncaught TypeError: document.querySelector(...) is null

I'm following a tutorial, and write the exact same code as the tutor, but i get this error in the console: "Uncaught TypeError: document.querySelector(...) is null". Here is the code, and I get an error message on the line " document.querySelector('.pepsi').src = anything;".

<script type="text/javascript">

function imgSlider(anything){

document.querySelector('.pepsi').src = anything;

}

</script>

This code is linked(?) to this code some lines above:

<ul class="thumb">

<li><img src="pepsi001.png" onclick="imgSlider('pepsi001.png')"></li>

<li><img src="pepsi002.png" onclick="imgSlider('pepsi002.png')"></li>

<li><img src="pepsi003.png" onclick="imgSlider('pepsi003.png')"></li>

</ul>

The "pepsi" pictures in the code is saved in the same folder as I have saved the HTML and CSS file. I use an external SSD (I'm using mac) to store my coding files. What I'm trying to achieve is that the big pepsi bottle change color when clicking on one of the small pepsi bottles, as you can see here: https://youtu.be/s_z5laE4KTw?t=620 . Any help is appreciated!

Michael Cook
Michael Cook
474 Points

You are trying to select an element with the class name pepsi, but you haven't added that class to any of your HTML elements.

Tomas Schaffer
Tomas Schaffer
11,569 Points

Hi first problem is described that is you dont setting class names on elements, second problem is. When you selecting elements by class you dealing always with array or list of elements, even if you have only one element with this class name. If you use id you get only one element. so in your case you have to set also index or if you want to modify all elements use some loop.

document.querySelector('.pepsi')[0].src or use loop