Menu
Community /Pin to ProfileBookmark
@cootheadJan 24.2021 — #Hi there Nordeps,
and a warm welcome to these forums. ;)
Further to what@Sempervivum has pointed out,
I would suggest that you use [i]input type="number"[/i]
instead of[i]input type="text"[/i]. Also using the [i]label
element[/i] is considered to be good practise. There
is also no need to use [i] dir="ltr"[/i] as it is the default
setting.
[i]coothead[/i]
Help a non-programmer out
I’m a student who has to do a mandatory course in “information technology” which involves a bit of programming. I’ve managed to get all my scripts to work except for this one. It’s essentially a tiny program that requires you to input your height and weight, and it ought to calculate your BMI. Except, when I input some numbers and press the button, nothing happens. As I said, I barely know anything about programming, so I would prefer your simplest solutions. Thanks in advance!
<!DOCTYPE html>
<html lang=”en” dir=”ltr”>
<head>
<meta charset=”utf-8″>
<style>
#bmi
{
padding: 5px;
width: 150px;
background-color: #ccc;
font-weight: bold;
}
</style>
<script>
document.getElementById(“btBMI”).onclick=function()
{
var v=document.getElementById(“v”).value;
var h=document.getElementById(“h”).value;
var BMI=v/(h/100*h/100);
document.getElementById(“bmi”).innerHTML=bmi.toPrecision(3);
}
</script>
<title></title>
</head>
<body>
<input type=”text” id=”v”> Input your weight in kilograms<br>
<input type=”text” id=”h”> Input your height in centimetersr<br>
<button id=”btBMI”>Calculate BMI</button>
<div id=”bmi”>Your BMI:</div>
</body>
</html>
Sign in
to post a comment4 Comments(s) ↴
0
@cootheadJan 24.2021 — #Hi there Nordeps,and a warm welcome to these forums. ;)
Further to what
I would suggest that you use [i]input type="number"[/i]
instead of[i]input type="text"[/i]. Also using the [i]label
element[/i] is considered to be good practise. There
is also no need to use [i] dir="ltr"[/i] as it is the default
setting.
<i>
</i><!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>BMI Calculation</title>
<!--
The internal CSS should be transferred to an external file
<link rel="stylesheet" href="screen.css" media="screen">
-->
<style media="screen">
body {
background-color: #f0f0f0;
font: normal 1em / 1.62em sans-serif;
}
input[type="number"], button {
margin: 0.4em 0;
}
#bmi {
width: 9.4em;
padding: 0.4em;
margin: 0.5em 0;
background-color: #ccc;
font-weight: bold;
}
</style>
</head>
<body>
<input type="number" id="v" min="40" max="140" value="40"> <label for="v">Input your weight in kilograms</label><br>
<input type="number" id="h" min="120" max="220" value="120"> <label for="h">Input your height in centimetres</label><br>
<button id="btBMI">Calculate BMI</button>
<div id="bmi">Your BMI:</div>
<script>
(function(d) {
'use strict';
d.getElementById('btBMI').onclick = function() {
var v = d.getElementById('v').value,
h = d.getElementById('h').value,
BMI = v/( h/100 * h/100);
d.getElementById('bmi').textContent = BMI.toPrecision(3);
}
}(document));
</script>
</body>
</html>
[i]coothead[/i]