Image change with querySelector

JavaScript
1

Hi. I’m trying to change the entire div of another div with the querySelector and querySelectorAll. I previously have some code working on another page but just using the images. I’ve tried to apply the same principle but with just the first 4 to see if it works but apparently not.

The code is here:
webpage1 - alternate layout (codepen.io)

Any help would be appreciated

3

Thank you for the clarification. I was intending to select the entire div but if that’s not possible I will have to select only the images. I would also like to display the images text. I’ve used document.getElementById() before but in this case as there is already a function in place I’m unsure what to do

5

It’s okay I figured it out. This works inside the function:

if (thumbImgs[0]) {       document.getElementById("samples_header").innerHTML = "Snow";
    }
6

the individual divs with the displayed name of the image sample. It’s okay though I have another solution

7

Okay so it worked for the first one but not for the rest. I’m now stuck on ‘Cloud’.

9

The image selected. It worked for the first one without any other code

12 
(thumbImgs[i] == 0)

???

14

Your img elements should always have an alt attribute with a value that describes what the image is. If you do that, then you could get rid of all the if/else if statements and simply assign the alt value of the targeted image to the innerHTML of the #samples_header div.

So:

mainImg.src = e.target.src;
document.getElementById("samples_header").innerHTML = ???
15

Sorted. Thank you Randell :+1:

18

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.