CSIT128-Lab 4 Solved

Question 1. Create 2 buttons on a web page: “Console Hi” and “Alert Hi”.​

 

When the user clicks on the button “Console Hi”, display a message to the console: “Hi there! JavaScript is cool!”

 

When the user clicks on the button “Alert Hi”, an alert window will appear and it displays the same message: “Hi there! JavaScript is cool!” 

 

(If you are using Chrome, to view the Console, right click on the web page and select “Inspect”, then click on the “Console” tab. If you are using Firefox, to view the Console, right click on the web page and select “Inspect Element”, then click on the “Console” tab.)

 

 

Question 2. Create 2 buttons on a web page: “Lion” and  “Frog”.​            Below the buttons, display a text field.

 

When the user clicks on the button “Lion”, the text field displays “The Lion Button is clicked”. When the user clicks on the button “Frog”, the text field displays “The Frog Button is clicked”.

 

 

Question 3. Create 2 buttons on a web page: “Lion” and  “Frog”.​

 

When the user clicks on the button “Lion”, a picture of a lion is shown.

When the user clicks on the button “Frog”, a picture of a frog is shown.

 

 

Question 4. On a web page, display an image of a lion and an image of a frog.​

 

When the user clicks on the lion image, a message “Roar” in orange color appears on the page.

When the user clicks on the frog image, a message “Ribbit” in green color appears on the page.

 

 

             

Page 1 of 2

Question 5. On a web page, display an image of a lion and an image of a frog.​    Under the images, display the following two messages.

Number of lion clicks: 0

Number of frog clicks: 0

The two messages are in orange color and green color, respectively.

 

When the user clicks on the lion image, the lion click count is increased.

When the user clicks on the frog image, the frog click count is increased.

 

Question 6. On a web page, display an image of a frog.​

 

Each time the user clicks on the frog image, show one more frog face on the page.

 

Below is what displayed after the user clicked on the frog image 10 times. We can see that the page shows 10 frog faces. We can use the following character entity hex code for the frog face x1F438.