Lab: Arrays and Loops—Memory Game
- Define and call several JS functions
- Practice with JS arrays and for-loops
- Read from input elements
- Output on the console and write onto the html page itself
- Work with the logic for a significant application
Task 1: Set up images in the html document
MemoryGameStart folder from the download directory. Examine the downloaded material and open
memoryGame.html file in your text editor. Add the html code needed to show three
buttons with the image of the question mark (which can be found in the
Give the three buttons ids
0, 1, and 2 respectively.
(You can consult material from the lab on the Index Cards game, if you need to.)
Test your html page to make sure these buttons show nicely on the page.
Now, notice how similar these three sets of tags are, and in particular, notice where they differ.
Task 2: Define the start() function
memoryGame.js file, fill in the definition of the function
start(), which will add to the page
six buttons -similar to the ones in the previous task-, each with the question mark image on it.
The html tags you wrote in Task 1 should be your guide here.
We would like the
start() function to be invoked as soon as the page loads in the browser's window.
In order to do so, we arrange to call it as soon as the page loads: Notice the
body tag of this html document:
Task 3: Fill in the missing code in the playCard(num) function
playCard(num) function will be called when anyone of the buttons is clicked.
When it is called from the first button, it will show the first image from the
When called from the second button, it will show the second image, etc.
Therefore it should take an integer as input, which is the id of the button that was clicked.
function to each button by adding to each button's tag:
Now fill in the missing code in that function, as comments there direct you.