Cycling images with javascript

Question

Cycling images with javascript

366 views Asked by Proctor At 08 December 2024 at 08:37

Why doesn't the second (hawk) image appear when the button is clicked? It goes straight to the else statement showing the ant image.

<!DOCTYPE html>
<html>
    <body>
        <script>
            function changeImg() {
                if (document.getElementById("cycle").src == "fox.jpg") {
                    document.getElementById("cycle").src = "hawk.jpg";
                } else {
                    document.getElementById("cycle").src = "ant.jpg";
                }
            }
        </script>

        <button onclick = "changeImg()">change image</button>
        <img id ="cycle" src ="fox.jpg"/>
    </body>
</html>

Original Q&A

There are 3 answers

**Petrashka Siarhei** · Answer 1 · 2017-11-17 21:57:57

document.getElementById("cycle").src always has full url of image (example:https://example.loc/example/fox.jpg) and this is not similar from fox.jpg. You need try another solution.Try use cycle.getAttribute('src')

Example code:

function changeImg() {
          let cycle = document.getElementById("cycle");
               console.log(cycle.src,cycle.getAttribute('src')); // show real value and taribute      
            if (cycle.getAttribute('src') == "fox.jpg") {
                cycle.src = "hawk.jpg";
            } else {cycle.src = "ant.jpg";
            }
        }

**Daniel** · Answer 2 · 2017-11-17 21:30:12

Please add your script tags at the end of the body to make sure that your dom is rendered before accessing any elements. (like in my example) The problem with your code is, that you need to add a new if for every new image you add. As you noticed yourself, it becomes hard to understand and debug. For something like cycling, use an array and modulo operation on the index of that array.

With this solution, you can add as many images to the images array as you like, without touching the code/logic;

<!DOCTYPE html>
<html>
<body>
  <button onclick="changeImg()">change image</button>
  <img id="cycle" />

  <script>
    var imageElement = document.getElementById("cycle");
    var images = ["fox.jpg", "hawk.jpg", "ant.jpg"]; // add as many images as you want
    var counter = 0;
    imageElement.src = images[counter] // set the initial image

    function changeImg() {
      counter = (counter + 1) % images.length;     
      imageElement.src = images[counter];
    }
  </script>
</body>
</html>

**Gabriele Petrioli** · Answer 3 · 2017-11-17 21:35:01

Use getAttribute('src') if you want to access the actual contents of the attribute. Otherwise you get the resolved URL.

var cycle = document.getElementById("cycle");
if (cycle.getAttribute('src') == "fox.jpg") {
    cycle.src = "hawk.jpg";
} else {
    cycle.src = "ant.jpg";
}

TechQA.

Cycling images with javascript

There are 3 answers

Related Questions in JAVASCRIPT

Popular Questions

Popular Tags

Trending Questions