We’ve seen how we can use JavaScript to move content around on the page by changing the CSS. We can even react to the user by listening to events.
But what if you want to change the order of your photos in the
slide show? You could do it by editing the <img> tags
in the HTML, which is not a bad idea.
We could also be very clever, and use JavaScript to rearrange the images. We can edit (including adding and deleting) the content of the document, just like we can change the CSS.
Using JavaScript just to be clever is not a good idea for “real” web pages. But being clever is a fun way to learn. Plus, there are situations where editing the content using JavaScript is a good idea.See how to edit the content of the document with JavaScript DOM properties and methods.
Visit your slide show in Chrome, and open the console.
Remember, since we have our slideshow.js running, we
have a reference to the “film roll” in the variable called
filmroll. In the console, type:
filmroll.innerHTML
Is the innerHTML property of filmroll a
read-only value? Find out by trying to set it to some other
value:
filmroll.innerHTML = "Remember, strings need quotes."
You can also use numbers, and do math, if you wanted:
filmroll.innerHTML = 4 + 3 * 111 + 1000
Try it with a string of HTML:
filmroll.innerHTML = "<h1>Whoa!</h1> <p>Check it out.</p>"
We can add HTML to the HTML that is already there using the
+= operation:
filmroll.innerHTML += "<p>Yeah! Lots of potential.</p>"
Try this:
var address = "http://tif.ca/hello.jpg"; var html = "<img src=" + address + ">"; filmroll.innerHTML = html;
One of the easiest ways to create content in a web page using
JavaScript is to set the innerHTML of an element to
something new. Since HTML is just text, you can set the
innerHTML to any text and it is rendered by the
browser as HTML.
We can read the innerHTML of an element as well as
write to it, which means we can add the new HTML to the existing
innerHTML to add, rather than replace, content.
Because we can “add” strings of text together, we can also create
HTML, and then use it to set innerHTML.
This technique is not the only way to add content to the document, but for today, we will only use this one.
To see how to build an HTML string from an array of values.
In slideshow.js, create an array
called photos, and store the file names of your images:
var photos = [ "FILE_NAME_OF_THE_FIRST_PHOTO", "FILE_NAME_OF_THE_SECOND_PHOTO", "FILE_NAME_OF_THE_THIRD_PHOTO" ];
Remember to use the complete file name including the file extension (.jpg, .gif or .png).
Define a variable called html that is just an empty string:
var html = "";
In your index.html, delete all the image tags that are
inside of your “film roll” <div> (the one with
id="the-film-roll"). Your index.html
will looks like this afterwards:
<!doctype html> <head> <title>I ♥ Coding</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <div class="picture-frame"> <div class="film-roll" id="the-film-roll"> </div> </div> <script src="slideshow.js"></script>
Refresh the page in Chrome to prove to yourself that the images are really all gone.
Next, we'll use a for loop to add the images dynamically.
Back in slideshow.js, write a for
loop that iterates over the items in the photos array, and
each time adds another <img> tag to the html
string:
for (var i = 0; i < photos.length; i++) {
html += "<img>";
}
A for loop is similar to a while loop, but
initializing the loop state, checking it, and updating it, are all grouped
together in the brackets after the keyword for.
The first part, var i = 0, initializes the variable used as a
counter. The second part, i < photos.length, checks if the
loop should be terminated. The last part, i++, increases the counter
by one to make the loop continue.
Now that you know how a for loop works, recall that the value
stored at index i of the array photos is accessed like
this: photos[i].
Update the loop so that each time, the value stored in
photos[i] is added as the src attribute:
for (var i = 0; i < photos.length; i++) {
html += "<img src=" + photos[i] + ">";
}
Now set the innerHTML of filmroll to
html:
filmroll.innerHTML = html;
Refresh the page in Chrome. Double check that scrolling still works.
Now rearrange your photos: put the second photo first. Do this by
changing their order in the photos array.
Pretty cool! We stored all the names of our images in an array, and
then used the array to create HTML. By updating the
innerHTML with the HTML we created, we added the photos
to the page.
Since we stored the file names in an array, we could easily change the order of the photos by changing the order of the array.
(It would also be easy to just edit the HTML, but this is so much more clever, right?)