How are images and src links stored as variables to be selected in JS?

Question

Attempting to create functionality for an image selector carousel

functionality of image selector:

- click an img in container below main image

- clicked img displays in main image container

- previous displayed main img populates into container below main image in place of selected img

html

  <div class="single-pro-images">
    <div class="main-image" onclick="clicked();">
        <img src="https://cdn.marvel.com/u/prod/marvel/i/mg/b/e0/56a7c0725bcbb/clean.jpg" width="100%" alt=""></div>
    <div class="small-img-group">
      <div class="small-img-col">
        <img src="https://ids.si.edu/ids/deliveryService?max=800&id=https%3A%2F%2Famericanhistory.si.edu%2Fsites%2Fdefault%2Ffiles%2FAHB2008q04107.jpg" width="100%" class="small-img" alt="">
      </div>
      <div class="small-img-col">
        <img src="https://i0.wp.com/blog.gocollect.com/wp-content/uploads/2022/02/75960620003000431.jpg?ssl=1" width="100%" class="small-img" alt="">
      </div>
      <div class="small-img-col">
        <img src="https://cdn.marvel.com/content/1x/fcbdasmven2023_cover-resized.jpg" width="100%" class="small-img" alt="">
      </div>
    </div>
  </div>

css

 .single-pro-images {
  width: 25%;
  margin: 0px 15px 0px 0px;
}

.small-img-group {
  display: flex;
  justify-content: space-between;
    margin-top: 15px;
}

.small-img-col {
  flex-basis: 24%;
  cursor: pointer;
}

Started the code by attempting to grab the main image src and have the console log display true or false if the image src were not equal, and when the srcs are not equal the main image will change. Stuck on writing the if-statement because I'm sure if images can be stored as values.

JS

let mainImg = document.getElementsByClassName("main-image");

function clicked() {
  if (mainImg !== "https://cdn.marvel.com/u/prod/marvel/i/mg/b/e0/56a7c0725bcbb/clean.jpg"); {
    console.log(true);
  }

Learned booleans/if-statements and functions yesterday, attempting to apply the lessons today but feels like I'm putting the cart before the horse.

Answer 1

So here is my new clicked function with arg = newSrc givin as parameter

 function clicked(newSrc) {
    // Select the main image ( we could use querySelector(".main-image") )
    let mainImg = document.getElementsByClassName("main-image")[0];
    // we use [0] to refer to the first elements in our dom obj here is the main img
    // in case of querySelector it will return only one obj so we dont need indexing [0]
    // use a temp variable to store the main image SRC
    let tempSrc = mainImg.src;
    // Set the main image src to the newSrc givin in the function argument
    mainImg.src = newSrc;
    // change the clicked image src to the main image src
    // event.target to target the clicked element 
    event.target.querySelector(".small-img").src = tempSrc ;
  }

also you need to change the HTML CODE like this

  <img class="main-image" src="1.jpg" width="100%" alt="" />
  <div class="small-img-group">
    <div class="small-img-col" onclick="clicked('2.jpg')"> <!-- on click funtion here -->
      <img src="2.jpg" width="100%" class="small-img" alt="" />
    </div>
    <div class="small-img-col" onclick="clicked('3.jpg')"> <!-- on click funtion here -->
      <img src="3.jpg" width="100%" class="small-img" alt="" />
    </div>
    <div class="small-img-col" onclick="clicked('4.jpg')"> <!-- on click funtion here -->
      <img src="4.jpg" width="100%" class="small-img" alt="" />
    </div>
  </div>

you just need to change the 1.jpg etc to your images src