Image change with querySelector

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

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

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

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

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

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

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

(thumbImgs[i] == 0) 

???

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 = ???

Sorted. Thank you Randell :+1:

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