interactive web design


In this unit, we will be introduced to a magical Javascript function document.getElementById

We will look at how to target elements in our web document with Javascript.

Once we have targeted an element, we can push data into an element using innerHTML

Note: if you understand var, console, prompt and parseInt, start the video at 4.20

Getting started

Watch the video which will explain the above concepts.


Watch the video. Can you create a webpage with 2 elements in the body section.

One element has an id name

The other element has an id hometown

Write some Javascript to prompt the user for his/her name and hometown and push the information into the web document using document.getElementById


Adapt the javascript.

Write some new javascript that asks the user for his/her age and email address.

The information should be placed in the body of the web document, under the hometown.


Adapt the javascript.

Look at your Javascript code.

Can you adapt it so that the information is pushed onto the document as sentences, eg

Your name is Hiroshi.

Your name are from Tokyo.

You are 19 years old.

Your email address is


Submit your web document (html file) as instructed by your tutor.


browser file tags body save h1 html h4 h2 structure refresh h3 organised