document.getElementById("ageElement").innerHTML

Can we change the src attribute of an image tag?

Let's find out!

Getting started

Watch the video to grasp the concept.

GET SET UP

Create a Focus 3B project folder.

Downloads

Download these 5 images and save them in your Focus 3B project folder.

1. cat
2. mouse
3. dog
4. elephant
5. pig

TASK 1

Watch the video. Can you create a webpage that asks the user for an animal name and it will display a picture of the animal!

TASK 2

Adapt the javascript.

Can you adapt your design so that a message telling us the name of the animal appears under the image eg I am a cat!

TASK 3

Adapt the javascript.

Can you figure out how to do this in javascript:

Hint: do some research on if in Javascript... and comparing STRINGs eg if(animal == "cat"){}

TASK 4

Adapt the javascript.

Can you figure out how to do this in javascript:

Hint: do some research on if/else in Javascript... and comparing STRINGs eg if(animal == "cat"){}

Super Tricky - Optional Task

Adapt the javascript.

If the animal is a cat then a message MEOW appears on the webpage

else if the animal is a dog then the message WOOF appears on the webpage

else if the animal is a mouse then the message SQUEEK appears on the webpage

else if the animal is a pig then the message OINK appears on the webpage

else if the animal is an elephant then the message BRRRRRR appears on the webpage

else the message Animal not available appears on the webpage

SUBMISSION

Submit your solution as instructed by your tutor.