Picture Swapper


Basic Features

Step 1: From the Cloud9 dashboard: Create a new workspace
Fill in the following text boxes on the form:
→ Workspace name: picture-swapper Copy
→ Clone from Git or Mercurial URL: https://github.com/studentmrcode/picture-swapper.git Copy
Click Create workspace button
Open index.html and click Run

Step 2: Think about the design of your program and write pseudocode.
Hint: Click here for a pseudocode example.

Step 3: Write actual code from your pseudocode.
Hint: If you're having trouble, look at your Slideshow project.


For adding an event listener to each image, use the same function, and the keyword this to get the image that was clicked:
image1.addEventListener("click", clickImage);
image2.addEventListener("click", clickImage);
image3.addEventListener("click", clickImage);

function clickImage() {
    // add a selected class to the image that was clicked
For swapping two images, the easiest way is to swap their src attributes:
// this is how you get an image's src attribute
var someSrc = someImage.getAttribute("src");

// this is how you set an image's src attribute
someImage.setAttribute("src", someSrc);

Complete this illustration to learn how to swap.

Debugging help

Last topic Next topic