interactive web design

<button onclick = "callFunction()">click me!</button>

In this unit, we will look at how to activate Javascript by clicking buttons.

When we click a button, we will call a function.

The function is like a little box of code that will run when it is called.

Getting started

Watch the video which will explain the above concepts.


Download this webpage and save it in your Lesson 4 folder.

There is a button. When you click the button it calls a function - calculateBMI().

The function works as follows:

  1. It asks the user for their weight in kilograms.
  2. It asks the user for their height in meters.
  3. It calculates the user's BMI. The formula is weight/height2
  4. It displays the result on the webpage in a sentence eg: Your BMI is 22.3.

Code this function.

Use the following test table to test your result:

weight height bmi
60 1.65 22.0
72 1.91 19.7
65 1.53 27.8

Save your solution as lesson4-1.html


Adapt the javascript.

Replace the button with an image of a doctor.

Under the image is a message Click me!

When the user clicks the image, the calculateBMI() function is called.

In the style section of the webpage, include the following CSS:




Save your solution as lesson4-2.html


Adapt the javascript.

Research how to add this to your page:

If the calculated BMI is greater than 25, a message Overweight is displayed under the BMI on the webpage.

else, a message Normal is displayed.

sample output:

Save your solution as lesson4-3.html


Submit your 3 web documents (html files) as instructed by your tutor.


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