Keeping Track of Current Image Index with a JavaScript Variable

Lesson 37

Learn how to keep track of the current image index using a JavaScript variable.

In order to allow for multiple images to be browsed through as you click the next button, you have to know which image URL to use to display the image. Since the URLs are held in an array, you can take the next element every time you click next.

In order to remember what image the user is seeing, you have to store its index in a variable. Then, every time you click the next button, that index is incremented and eventually you see the next image in the list.

01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72

Summary

## Summary of Transcript

The speaker discusses a method for alternating images in a web application. The process involves the following steps:

1. **Adding Images**:
   - The speaker adds a third image URL to a list, explaining how to access it by its index (zero-based counting).

2. **Changing Images on Click**:
   - The goal is to create a mechanism to change images each time a "Next" button is clicked.
   - The initial idea is to simply increment an index value each time the button is pressed.

3. **Using a Variable**:
   - A variable named `currentIndex` is declared with an initial value of zero to keep track of the currently selected image index.
   - Since the index will change with each click, the variable is declared using `let`.

4. **Updating the Index**:
   - On each button click, the current index is incremented by one, and this new value is set for future image selections.
   - The operation is detailed: when a button is clicked, the current index is updated, so when referencing the images list, the correct image based on the new index is displayed.

5. **Example Iteration**:
   - On the first click, the image at `currentIndex` (which is initially zero) is displayed. After the first click, `currentIndex` is incremented to one, and so on.

6. **Image Sizing**:
   - Lastly, the speaker notes the importance of adjusting the image's size to ensure it fits well on the display.

This summary captures the key concepts discussed regarding how to alternate images dynamically in a web interface.

Video Transcript

Now once we get the second element, now we can figure out a mechanism to keep changing or alternating the images. Right? I could have another image. Let me add another image here to the, let me find another image so we can add. Let's say I add a third element to the list of image URLs. I just add a third element. Okay? If I want to access that, that would be what? Index two because we count zero, one, two, right? Three minus one is two. Nice. Now we got three images, we're going to make it gladly. If I click next, it's always going to be the cat because it's all in changing to the second element. So we need to find a way. Okay. Can't we find a way every time we click? It keeps alternating the number. Maybe the first time I click it's one, the second time I click is two, and then if I click again, obviously it will go three but that's wrong, right? But let's just keep it simple for now and just increase that number. So we need to find a way of doing that. So we can actually come here outside of function and make a variable to hold the index of the next element. Okay? Let's say current index, that's the name of the variable. I'm going to assign a number. Say zero. Okay? So this is going to represent, okay, in the image is zero or out, right now the selected image is the one of the index zero. So this is a variable. Now this variable, every time I click, I want to change the index. The next time I click is going to be one, and then two, and so on. Now because it's a variable that changes value over time, it's not a const, it has to be a let. So we have to write let there because we're going to change it later. Now every time I click next image, I need to do the following. I take whatever current index is, right? This case is zero. I need to add one to it. So plus one. Now I need to make the new current index to be one more than the previous. So I can say current index equals that. So what is it doing? Okay. The first time you click, what's the value of current index? That's zero, right? We always read these things from the right, okay, in this case. So it's zero. So zero plus one is one. So one becomes the new value for current index. Because remember, when you have equal sign, whatever's on the right goes to be started on the left. So current index is redefined as one when we click. Okay, let me revert that. This is what this means, right? Right here. Now, once we have this new value, we can use it as the index here. Instead of one, I can say current index. Because that in itself, the first time is going to be one, right? So I click run, click next image. It still changes. You can see current index internally is going to be one. So if I click next image again, it should be changed to the elephant. Because the current index will come here. Okay, current index is one. One plus one is two. Therefore, the new value for current index is two. Now two goes into what is here. So I select image URLs two, which means the third element, right? Because we got a count from zero. And it takes the URL for the elephant and places it here and sets the new source. Let me revert my code to what it was before. There you go. Okay, click next image, click next image, elephant. Now the elephant is like too big. Maybe I want to define a height for the image here. So oops, maybe I liked 100 better. Anyway, just for the sake of not having too big there. So you can always have the same.