In the previous exercise we learned how to use two arrays to display a group of pictures and text inside of an html document. In this exercise we are going to use a very similar technique that uses the same arrays to produce a slideshow that displays information for just one candidate at a time.
- Much of the work for this lesson was already taken care of in the previous lesson, so we might as well take advantage of it. Sooo, duplicate candidates.js and candidates.html and name them candidates2.js and candidates2.html.
- Inside of candidates2.html you will find a link to candidates.js.
<script src="js/candidates.js"></script> Change that to link to candidates2.js. - Add the two buttons shown below to candidates2.html.
- Create two new variables named next and previous and set their values to the ids that you created in the previous step. In a bit, we will use these variables to add an 'onclick' property to the previous and next buttons.
- Create a function named canShow with the 'argument' plusMinus as shown below. Arguments are essentially variables that are set when you call a function. In this case we are going to use the argument plusMinus to add either a positive or a negative 1 when we call the function. A positive one will move forward through the array; negative one will move backward.
- Find the code shown below and paste it into your function. This time we don NOT want to increment the content of our div tag so change the += on the first line simply to = .
- Now take a look at your function. We are using the variable i with both candidateNames and candidatePix but there is one problem. We have not yet defined i (previously it was part of the for function) for the canShow function. We are going to use i to pull values from arrays and want it's value to change with each button click. In order for things to function properly we will need to define i outside of the function as a 'global' variable. So, just above your function add the following variable declaration: let i = 0;
- From this point forward our job is ridiculously easy. On the last line of the canShow function add in i += plusMinus. This step may seem confusing but it's pretty straightforward. If we had added i+=1, it would work the same as i++ and increment the value of i by one each time the function is called. The reason we are using the plusMinus argument instead of a 1 is because we want to be able to add a negative when someone clicks the previous button.
- Enough talk, let's try this thing out. Add the lines of code below to activate the canShow function. Please note that we add a value of positive 1 for the next button, and a negative 1 for the previous button.
- Test it out. If things work keep clicking until you pass James Webb. At that point you most likely are seeing the word 'undefined' instead of a name and image. That's because we exceeded the length of our array. BTW, the same thing happens if you click the previous button until the value of i becomes negative (less than 0). The solutions are quite simple and one is shown below. If the value of i becomes equal to the length of our array then we are in trouble because the first value in an array is indexed by 0. This means that the last item in an array is indexed by a number that is one LESS than the actual array length. Give this some thought and ask your instructor for clarification if you find it confusing!
