Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Changing Image Based on What Image is Shown

I have three images-one shown, the other two with display:none.

I’d like, when I press the button, for the script to check which image is currently being displayed and switch to the next image accordingly.

The buttons seem to call to the .js file properly, because the browser console returns the final else log.

function rightImage() {
  var image1 = document.getElementById("stc-parking-map");
  var image2 = document.getElementById("stc-first-floor");
  var image3 = document.getElementById("stc-second-floor");
  var image1Indicator = document.getElementById("directions-image1-indicator");
  var image2Indicator = document.getElementById("directions-image2-indicator");
  var image3Indicator = document.getElementById("directions-image3-indicator");
  if (image1.style.display === "flex") {
    image1.style.display = "none";
    image2.style.display = "flex";
    image1Indicator.style.backgroundColor = "rgba(0,0,0,0.92)";
    image2Indicator.style.backgroundColor = "rgba(37,53,81,1.00)";
  } else if (image2.style.display === "flex") {
    image2.style.display = "none";
    image3.style.display = "flex";
    image2Indicator.style.backgroundColor = "rgba(0,0,0,0.92)";
    image3Indicator.style.backgroundColor = "rgba(37,53,81,1.00)";
  } else if (image3.style.display === "flex") {
    image3.style.display = "none";
    image1.style.display = "flex";
    image3Indicator.style.backgroundColor = "rgba(0,0,0,0.92)";
    image1Indicator.style.backgroundColor = "rgba(37,53,81,1.00)";
  } else {
    console.log("Everything Failed?");
  }
}

function leftImage() {
  const image1 = document.getElementById("stc-parking-map");
  const image2 = document.getElementById("stc-first-floor");
  const image3 = document.getElementById("stc-second-floor");
  const image1Indicator = document.getElementById("directions-image1-indicator");
  const image2Indicator = document.getElementById("directions-image2-indicator");
  const image3Indicator = document.getElementById("directions-image3-indicator");
  if (image1.style.display === "block") {
    image1.style.display = "none";
    image3.style.display = "block";
    image1Indicator.style.backgroundColor = "rgba(0,0,0,0.92)";
    image3Indicator.style.backgroundColor = "rgba(37,53,81,1.00)";
  } else if (image3.style.display === "block") {
    image3.style.display = "none";
    image2.style.display = "block";
    image3Indicator.style.backgroundColor = "rgba(0,0,0,0.92)";
    image2Indicator.style.backgroundColor = "rgba(37,53,81,1.00)";
  } else if (image2.style.display === "block") {
    image2.style.display = "none";
    image1.style.display = "block";
    image2Indicator.style.backgroundColor = "rgba(0,0,0,0.92)";
    image1Indicator.style.backgroundColor = "rgba(37,53,81,1.00)";
  }
}
/*
CSS (There are some properties that belong to a class, so you'll see things like display:flex missing from containers)
*/

#visit-us-parking-and-directions-content {
  justify-content: flex-end;
}

.peirce-directions-image {
  width: 100%;
}

#stc-parking-map {
  display: flex;
}

#stc-first-floor {
  display: none;
}

#stc-second-floor {
  display: none;
}

#directions-image-change-button-container,
#directions-image-number-indicator-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.directions-image-number-indicator {
  height: 15px;
  width: 33.33%;
  border-right: solid;
  border-color: rgba(224, 224, 219, 1.00);
  background-color: rgba(0, 0, 0, 0.92);
}

.directions-image-number-indicator:first-child {
  border-left: solid;
  border-color: rgba(224, 224, 219, 1.00);
}

#directions-image1-indicator {
  background-color: rgba(37, 53, 81, 1.00);
}

.directions-image-change-button {
  padding: 38px 0 30px 0;
  width: 50%;
  height: 100%;
}
<div id="visit-us-parking-and-directions-container" class="section-container">
  <div id="visit-us-parking-and-directions-content" class="section-content">
    <h2>Parking and Directions</h2>
    <div id="parking-directions-images-container">
      <img id="stc-parking-map" class="peirce-directions-image" src="images/stc-parking-map.png" alt="parking-map">
      <img id="stc-first-floor" class="peirce-directions-image" src="images/stc-first-floor.png" alt="first-floor">
      <img id="stc-second-floor" class="peirce-directions-image" src="images/stc-second-floor.png" alt="second-floor">
      <div id="directions-image-number-indicator-container">
        <div id="directions-image1-indicator" class="directions-image-number-indicator"></div>
        <div id="directions-image2-indicator" class="directions-image-number-indicator"></div>
        <div id="directions-image3-indicator" class="directions-image-number-indicator"></div>
      </div>
      <div id="directions-image-change-button-container">
        <button id="directions-left-image-button" class="directions-image-change-button" onClick="leftImage()">&larr;</button>
        <button id="directions-right-image-button" class="directions-image-change-button" onClick="rightImage()">&rarr;</button>
      </div>
    </div>
  </div>
</div>

I’ve tried block and flex for the image display values. I put logs inside of the ifs at one point to see if it passed the if but failed to change the style-it did not pass the ifs, ever. I’ve tried both const and var for getting the elements.

Tags:

2

Answers


  1. 0

    Here is a good way to solve this problem, this solution can still be improved but is good none the less.

    I am basically making an array of the image and the indicator elements. With every button click I iterate over them and check which element has the active class. I then replace the active with the appropriate inactive class. The next step is straightforward since we want the next element to be active (previous in case of left button) so we do i+1 or i-1. But we also don’t want to go out of bounds. So when we’re at either upper or lower limit I manually reset the value of i to the appropriate value for the next part of the code to run.

    const imageElements = [...document.getElementsByClassName('images')]
const imageLen = imageElements.length
const indicatorElements = [...document.getElementsByClassName('indicator')]

function rightImage() {
    for(var i = 0; i<imageLen; i++) {
    let e = imageElements[i]
    if (e.classList.contains('active')) {
      e.classList.replace('active', 'display-none');
      indicatorElements[i].classList.replace('indicator-active', 'indicator-inactive')
      if(i >= imageLen-1) i = -1
      if (imageElements[i + 1]) {
          imageElements[i + 1].classList.replace('display-none', 'active');
          indicatorElements[i + 1].classList.replace('indicator-inactive', 'indicator-active')
      }
      return
    }
  }
}

function leftImage() {
  for(var i = imageLen-1; i>=0; i--) {
    let e = imageElements[i]
    if (e.classList.contains('active')) {
      e.classList.replace('active', 'display-none');
      indicatorElements[i].classList.replace('indicator-active', 'indicator-inactive')
      
      if(i === 0) i = imageLen
      if (imageElements[i - 1]) {
          imageElements[i - 1].classList.replace('display-none', 'active');
          indicatorElements[i - 1].classList.replace('indicator-inactive', 'indicator-active')
      }
      return
    }
  }
}
    #visit-us-parking-and-directions-content{
        justify-content:flex-end;
    }
    
    .peirce-directions-image{
        width:100%;
    }
    
    img {
      height: 20rem;
      width: 100%;
    }
    
    .active {
      display: block;
    }
    .display-none {
      display: none;
    }
    
    .indicator-active {
      background: aqua !important;
    }
    .indicator-inactive {
        background-color: black;
    }
    
    #directions-image-change-button-container,
#directions-image-number-indicator-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
}

.directions-image-number-indicator {
  height: 15px;
  width: 33.33%;
  border-right: solid;
  border-color: rgba(224, 224, 219, 1.00);
  background-color: rgba(0, 0, 0, 0.92);
}

.directions-image-number-indicator:first-child {
  border-left: solid;
  border-color: rgba(224, 224, 219, 1.00);
}

#directions-image1-indicator {
  /* background-color: rgba(37, 53, 81, 1.00); */
}

.directions-image-change-button {
  padding: 38px 0 30px 0;
  width: 50%;
  height: 100%;
}
    <div id="visit-us-parking-and-directions-container" class="section-container">
    <div id="visit-us-parking-and-directions-content" class="section-content">
        <h2>Parking and Directions</h2>
        <div id="parking-directions-images-container">
            <img id="stc-parking-map" class="images active" src="https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg?t=st=1712955997~exp=1712959597~hmac=dc6f6c8ab798a59aa74bc356163dc9ceb6097951cc1aaaea45c6efbc70d1f086&w=2000" alt="">
            <img id="stc-first-floor" class="images display-none" src="https://images.ctfassets.net/hrltx12pl8hq/28ECAQiPJZ78hxatLTa7Ts/2f695d869736ae3b0de3e56ceaca3958/free-nature-images.jpg?fit=fill&w=1200&h=630" alt="">
            <img id="stc-second-floor" class="images display-none" src="https://static.desygner.com/wp-content/uploads/sites/13/2022/05/04141642/Free-Stock-Photos-01.jpg" alt="">
            
            <div id="directions-image-number-indicator-container">
                <div id="directions-image1-indicator" class="indicator indicator-active directions-image-number-indicator"></div>
                <div id="directions-image2-indicator" class=" indicator indicator-inactive directions-image-number-indicator"></div>
                <div id="directions-image3-indicator " class="indicator indicator-inactive directions-image-number-indicator"></div>
            </div>
            <div id="directions-image-change-button-container">
                <button id="directions-left-image-button" class="directions-image-change-button" onClick="leftImage()">&larr;</button>
                <button id="directions-right-image-button" class="directions-image-change-button" onClick="rightImage()">&rarr;</button>
            </div>
        </div>
    </div>
</div>
    Login or Signup to reply.
  2. 0

    Rather than hide all but one image and have to keep track of which ones to hide/show, the thing to do here is just have only one img element that is always visible and just dynamically change which image is the src.

    To do this you put your image paths into an array. That way you can just use the array indices to iterate from one to the next.

    You won’t have to deal with styles or involved if/then statements.

    Here’s a simplified example:

    const images = ["https://png.pngtree.com/element_our/sm/20180515/sm_5afb099d307d3.jpg",
"https://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Approve_icon.svg/2048px-Approve_icon.svg.png", "https://static.thenounproject.com/png/2342715-200.png"]

const img = document.querySelector("img");

let index = 0;


document.querySelector("button.back").addEventListener("click", function(event){
  img.src = images[index--];
  // If at beginning, make back button go to end
  if (index < 0) {index = images.length-1}
});

document.querySelector("button.next").addEventListener("click", function(event){
   // If at end, make back button go to beginning
   if(index === images.length) { index = 0; }
  img.src = images[index++];
});
    img {width:200px;}
    <button class="back">&lt;</button> <button class="next">&gt;</button>
<br>
<img src="">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search