How do I use a variable to determine a display source in JavaScript?-CodePudding

I just started JavaScript and I can't figure out how to make an image change depending on a changing variable (I'd like to use relative file location). I watched a tutorial but the image replaces the tab instead of being part of it.

Here is my current progress:

<div >
  //Irrelevant sibling div
  <img name="slide"  />
</div>

<script>
  var i = 0;
  var images = [];
  var time = 3000;

//Below is where I think the problem is

  images[0] = window.location = "./Images/img1.jpg";
  images[1] = window.location = "./Images/img2.jpg";
  images[2] = window.location = "./Images/img3.jpg";
  images[3] = window.location = "./Images/img4.jpg";
  images[4] = window.location = "./Images/img5.jpg";

//Above is where I think the problem is

  function changeImg() {
    document.slide.src = images[i];

    if (i < images.length - 1) {
      i  ;
    } else {
      i = 0;
    }

    setTimeout(changeImg, time);
  }

  window.onload = changeImg;
</script>

I've tried using window.location.href but it had an identical result as what I currently have.

CodePudding user response：

You definitely don't want to set the window location to the image itself. Just remove that:

  images[0] = "./Images/img1.jpg";
  images[1] = "./Images/img2.jpg";
  images[2] = "./Images/img3.jpg";
  images[3] = "./Images/img4.jpg";
  images[4] = "./Images/img5.jpg";

You could also simplify your code a little:

var i = 0;
var images = [];
var time = 3000;

function changeImg() {
  document.slide.src = `./Images/img${  i}.jpg`;
  i = i % 5;
  setTimeout(changeImg, time);
}

window.onload = changeImg;

CodePudding user response：

to start with, I will assume that you have an image tag with slide as ID like

<image id="slide"></image>

form your code, I don't understand what do you want to do with the double equality on

  images[0] = window.location = "./Images/img1.jpg";
  images[1] = window.location = "./Images/img2.jpg";
  images[2] = window.location = "./Images/img3.jpg";
  images[3] = window.location = "./Images/img4.jpg";
  images[4] = window.location = "./Images/img5.jpg";

remember that window.location is an object and that will jump to that location (it's a page reload) and upon reloading, it will no longer run the script

I would change to simple

  images[0] = "./Images/img1.jpg";
  images[1] = "./Images/img2.jpg";
  images[2] = "./Images/img3.jpg";
  images[3] = "./Images/img4.jpg";
  images[4] = "./Images/img5.jpg";

now, the only place you need a small change, as the way HTML nodes work with javascript is the line where you call document.slide.src = images[i];

it should be

document.getElementById("slide").src = images[i];

and you will see all will work as expected

there's a bit more to your example you could make it better/refactor, but from your question, this are the 2 main changes :)

here's a simple example based on your code

        var i = 0;
        var images = [];
        var time = 3000;

        //Below is where I think the problem is

        images[0] = "https://via.placeholder.com/150?text=image 1";
        images[1] = "https://via.placeholder.com/150?text=image 2";
        images[2] = "https://via.placeholder.com/150?text=image 3";
        images[3] = "https://via.placeholder.com/150?text=image 4";
        images[4] = "https://via.placeholder.com/150?text=image 5";

        //Above is where I think the problem is

        function changeImg() {
            document.getElementById("slide").src = images[i];

            if (i < images.length - 1) {
                i  ;
            } else {
                i = 0;
            }

            setTimeout(changeImg, time);
        }

        window.onload = changeImg;

<image id="slide"></image>