boat

Javascript

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.

TASK 1

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

TASK 2

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:

img:hover{

opacity:0.6;

}

Save your solution as lesson4-2.html

TASK 3

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

SUBMISSION

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


Tags

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