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

Idan shami
Idan shami
13,251 Points
Posted by Idan shami
Idan shami
13,251 Points

implementing a photo inside an opened box (JS DOM)

I made a project site for the sake of exercise. in the site, I have pictures and buttons below them, when you click one of the buttons which is below the image a box opens and in there is suppose to be the same photo which you clicked earlier, how can I "append" the same photo in an efficient way, I don't want to create a box with the image for every single image do I? its not efficient and when my site will have a lot of pictures it will take a lot of time and effort, so what do I need to do? createElement() and then append it to the box, insert the image(but how .-.) or something else? I don't know exactly how to do that... if you didn't understand my explanation, look at Instagram for example, when you see someone's profile and you click on one of his photos a box with the photo opens.. this is(some) of my code:

<div class="picBox clearfix">
            <span id="close">X</span>
            <div id="imgBorder"></div>
            <div id="typeBorder"></div>
        </div>
        <div class="first3 clearfix">
            <div class="buttonbox">
                <img src="pics/sakura2.jpg.jpg" alt="sakura full body" class="img1"><br>
                <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>
            <div class="buttonbox">
                <img src="pics/naruto2.jpg.jpg" alt="naruto teachers" class="img1"><br>
                <span class="buttondes">see me</span>
            </div>
            <div class="buttonbox">
                <img src="pics/naruto.jpg.jpg" alt="naurto" class="img1"><br>
                <span class="buttondes">see me</span>
            </div>
        </div>
```js
let first3 = document.getElementsByClassName('first3')[0];
let buttondes = document.getElementsByClassName('buttondes')[0];
let picBox = document.getElementsByClassName('picBox')[0];
let close = document.getElementById('close');

first3.addEventListener('click', (event) => {
    if ( event.target.tagName == "SPAN") {
    picBox.style.display = "block";
    }
});

close.addEventListener('click', () => {
    picBox.style.display = 'none';
});

I don't know if you need it... I just need a simple explanation

thanks a lot and have a good day

Idan ^-^

Steven Parker
Steven Parker
229,744 Points
Steven Parker
Steven Parker
229,744 Points

It doesn't look like there's enough code here to demonstrate the effect you're after.
Take a look at this video about Posting a Question.

1 Answer

Idan shami
Idan shami
13,251 Points
Idan shami
Idan shami
13,251 Points

I solved it ^-^ but thanks anyway, added an img tag in the picBox with an empty src and replaced it with the src of the other images.