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

#2

What exactly are you trying to change in another div and which div are you trying to change?

If your goal is to click on one of the 10 thumbnail images and change the main image’s src to the same src of the selected thumbnail image, then you need to make sure your querySelector and your querySelectorAll are targeting img elements and not div elements, because div elements do not have src attributes.

#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

#4

You have a div wrapping each thumbnail image and you have another div that wraps all the divs containing the thumbnail images. To which div are you referring?

#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’.

#8

Explain what you think this is checking:

if (thumbImgs[0])
#9

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

#10

Also, you have a syntax error you need to resolve first related to the first use of else in the event listener callback function.

#11 
if (thumbImgs[0])

The above code checks if the first thumbnail exists basically. It does, so the code will always display “Snow”.

#12 
(thumbImgs[i] == 0)

???

#13

An image element is never going to be equal to 0 unless there is no image element.

#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:

#16

You could have also used e.target.alt.

#17

You could greatly simplify your CSS and not use # selectors by adding class="sample_div" to all the divs where you currently have something likeid=“sample1_div”`. Then your CSS would go from:

#sample1_div, #sample2_div, #sample3_div, #sample4_div, #sample5_div, #sample6_div, #sample7_div, #sample8_div, #sample9_div, #sample10_div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  text-align: center;
  background-color: black;
  margin: auto auto;
  width: 20%;
}

#sample1_div:hover, #sample2_div:hover, #sample3_div:hover, #sample4_div:hover, #sample5_div:hover, #sample6_div:hover, #sample7_div:hover, #sample8_div:hover, #sample9_div:hover, #sample10_div:hover {
  border: 3px solid brown;
}

to:

.sample_div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  text-align: center;
  background-color: black;
  margin: auto auto;
  width: 20%;
}

.sample_div:hover {
  border: 3px solid brown;
}

In general, you should get away from styling by id (# selector) and create classes that can be used over multiple items needing the same styling.

Also, if you want to prevent the images from moving around when you hover over them, you can add:

  border: 3px solid transparent;

to your your new .sample_div selector.