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

Posted by Idan shami
Idan shami
13,251 Points

pop up box written in JS doesn't work...(DOM)

I have an element( some button) on my project site, and when someone clicks on him, the button needs to open a box, but instead when I click the button an error is showing in the console that is saying "cannot read property of style of null", this is my code: HTML

        <div id="picBox">
        </div>

<span class="buttondes" id="buttonDes">see me</span>

CSS

.picBox {
    width: 90%;
    height: 90%;
    border-radius: 0.5em;
    border: 0.2em solid #ccc;
    background-color: white;
    position: fixed;
    z-index: 10;
    margin-top: -17.5em;
    margin-left: -9.5em;
    box-sizing: border-box;
    display: none;
}

JS

let buttonDes = document.getElementById('buttonDes');
let picBox = document.getElementById('picBox');

buttonDes.addEventListener('click', () => {
    picBox.style.display = "block";
});

You can see that I am changing the display from 'none' to 'block' what is the problem? please help, thanks a lot (: And I will continue to try and solve it...

3 Answers

Justin Cantley
Justin Cantley
18,068 Points

You're getting an error because you're using document.getElementsByClassName without specifying which element.
Notice that it says Elements and not Element.
This is creating an array and therefore you must specify which element you want like you would any other array.
Try this:

let buttondes = document.getElementsByClassName('buttondes')[0];
Idan shami
Idan shami
13,251 Points

thanks a lot (:

Justin Cantley
Justin Cantley
18,068 Points

No problem. Glad I could help. Also, this problem you've experienced with document.getElementsByClassName is why I prefer to use an id instead of a class to grab a single element.
It's all up to works best for you in the end though.

Justin Cantley
Justin Cantley
18,068 Points
Justin Cantley
Justin Cantley
18,068 Points

I believe the issue you're having is with the style in your css file.
Your selector targets .picBox which is looking for an element with the class picbox.
Since your element does not have a class, but does have an id, you want to use the id selector of #picbox.

Idan shami
Idan shami
13,251 Points

Ok, you are right, but if I want to do that with the class .picbox and I changed the code like this :

let picBox = document.getElementsByClassName('picBox');

it's giving me the error again the same error "cannot read property style of undefind" is it because of the .getElementsByClassName() returns an like-array object? and if it does, how do I fix it?

Idan shami
Idan shami
13,251 Points

yeah, but I need to select many elements(I haven't given you all my code), do you think I need to loop through the elements or do it with event bubbling? I think I will try to do it with the event bubbling.

Justin Cantley
Justin Cantley
18,068 Points
Justin Cantley
Justin Cantley
18,068 Points

The div element in your HTML has an id not a class. If you use class in your JS and CSS files then you need to change it in your HTML as well.

Idan shami
Idan shami
13,251 Points

I changed earlier it as you said and it worked, but now I want it to do the same thing with a class and I changed the HTML and I changed the JS and I changed the CSS the console is showing me another problem " Uncaught TypeError: buttondes.addEventListener is not a function"

my Html 

        <div class="picBox">

        </div>
                <span class="buttondes">see me</span>
            </div>
            <div class="buttonbox">
                <img src="pics/sakura.jpg.jpg" alt="sakura face" class="img1"><br>
                <span class="buttondes">see me</span>
            </div>
            <div class="buttonbox">
                <img src="pics/sensi.jpg.jpg" alt="dragonballsensi" class="img1"><br>
                <span class="buttondes">see me</span>
            </div>
            <div class="buttonbox">
                <img src="pics/the meeting.jpg" alt="gandalf and dumbledore" class="img1"><br>
                <span class="buttondes">see me</span>
            </div>

.picBox {
    width: 90%;
    height: 90%;
    border-radius: 0.5em;
    border: 0.2em solid #ccc;
    background-color: white;
    position: fixed;
    z-index: 10;
    margin-top: -17.5em;
    margin-left: -9.5em;
    box-sizing: border-box;
    display: none;
}

.buttondes {
    background: linear-gradient( 130deg, #39f, #3cf);
    border-radius: 1em;
    padding: 0.6em 1em;
    font-size: 1.2em;
    cursor: pointer;
    color: white;

}

let buttondes = document.getElementsByClassName('buttondes');
let picBox = document.getElementsByClassName('picBox');

buttondes.addEventListener('click', () => {
    picBox.style.display = "block";
});