Well, it's relatively simple, but if you don't have any experience, it's true than tutorials will be hard.
First, you need to have the user give you the height. The formula is simple enough and straightforward, and we need a container to display the result.
As I hate modal js popups, I will work with a form which will contain a text input and a button, and a span that will be updated with the result.
First, the html:
HTML Code:
<html>
<body>
<form>
Your height, in centimeters:<input type="text" id="inpTxtH" name="inpTxtH" /> <input type="button" onclick="javascript:compute();" value="compute"/><br/>
<span id="resultHolder"/>
</form>
</body>
</html>
I skipped doctype and all those details, but you get the idea.
Next, the javascript...
For that, we first need to have it get the value in the field.
For that, as I put an id attribute on the field, I can use a document.getElementById to locate it:
Code:
height=document.getElementById('inpTxtH').value
Then, computing the value:
Code:
speed=height*0.41*6582/100000
And now, we will put that result in the span container.
Here too, I will use the id to locate it, and rewrite the html contained in that element:
Code:
document.getElementById('resultHolder').innerHTML='Your average walking speed is '+speed+' Km per hours.'
And there you are...
Going a bit further, we can round on 2 decimals the result with this:
Code:
document.getElementById('resultHolder').innerHTML='Your average walking speed is '+Math.round(speed*100)/100+' Km per hours'
And even put a check to verify that only numbers are entered in the field:
Code:
if(!isNaN(height)){
speed=height*0.41*6582/100000
document.getElementById('resultHolder').innerHTML='Your average walking speed is '+Math.round(speed*100)/100+' Km per hours'
}else{
document.getElementById('resultHolder').innerHTML='Please enter your height in centimeters, without any letters.'
}
In the end, my resulting script will be:
HTML Code:
<html>
<body>
<script type="text/javascript">
function compute(){
height=document.getElementById('inpTxtH').value
if(!isNaN(height)){
speed=height*0.41*6582/100000
document.getElementById('resultHolder').innerHTML='Your average walking speed is '+Math.round(speed*100)/100+' Km per hours'
}else{
document.getElementById('resultHolder').innerHTML='Please enter your height in centimeters, without any letters.'
}
}
</script>
<form>
Your height, in centimeters:<input type="text" id="inpTxtH" name="inpTxtH" /> <input type="button" onclick="javascript:compute();" value="compute"/><br/>
<span id="resultHolder"/>
</form>
</body>
</html>
