Lesson 13: Dynamically Changing the SRC of an IMG Element
In this lesson you will create a game of Rock Paper Scissors (RPS). The rules are simple enough... rock beats scissors, scissors beats paper, and paper beats rock.
1. Start with these Project Files. After you dowload and unzip the folder, you should see the following files.
2. Open index.html in your favorite browser. You should see the players vs computer game screen for RPS.
There is a gameWindow div with a position of relative that holds three other elements (btnGo, playerPanel, and computerPanel) each with a position of absolute.
btnGo has been styled (see #btnGo in rps.css) but does not yet have an onclick attribute.
The computerPanel has similar elements. However, because the computer will be selecting rock, paper, or scissors when the GO button is pressed, the divs representing these choices will not behave as buttons (the user will not be able to click on them). Therefore, referring to these divs as labels instead of buttons, and naming them with an lbl prefix, is logical.
4. Open rps.js if you have not done so already. The global variables declared at the top will be used to select HTML elements that we want to manipulate. These variables are given a value in the init() function, after we are sure they have been loaded.
We will be using these variables soon. We already have some code inside the functions that are called from the HTML when the rock, paper, and scissors buttons are pressed.
5. Change the imgPlayer image when the buttons are clicked by setting a new value for the src of the element. Remember to specify the location of the images.
Now the image should change when any of the rock, paper, or scissors buttons are pressed.