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.
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:
- It asks the user for their weight in kilograms.
- It asks the user for their height in meters.
- It calculates the user's BMI. The formula is weight/height2
- 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.