1. Technology
Send to a Friend via Email

Distance Calculator with Times

4. Miles and Kilometres

clr gif
Join the Discussion

Questions? Comments?

With this version of the calculator we so far have the ability to display distances either in Miles or in Kilometres along with the time taken to travel the distance. To change it so that it displays both miles and kilometres we need to make one minor change to each of the HTML and the Javascript.

To change the HTML you simply need to add the code shown in bold below.

<tr><td align="right">Distance: </td>
<td><input type="text" id="m" name="m" readonly="readonly"
size="5" value="0" /> Miles</td></tr>
<tr><td align="right">Distance: </td>
<td><input type="text" id="k" name="k"
readonly="readonly" size="5"
value="0" /> Kilometres</td></tr>
<tr><td align="right">Travel Time: </td>
<td><input type="text" id="t" name="t" readonly="readonly"
size="5" value="0" /> Minutes</td></tr>

The other thing we need to do is to make a minor change to the Javascript so that it loads values into both distance fields. To do this we need to replace the following code in the Javascript:

document.getElementById('m').value = dst;

What we need to replace it with depends on whether your array has distances in miles or kilometres. If it is miles then you simply change that code to read as follows:

document.getElementById('m').value = dst;
document.getElementById('k').value = dst*1.60934;

If your distances in the array are kilometres you change the code to:

document.getElementById('m').value = dst/1.60934;
document.getElementById('k').value = dst;

©2014 About.com. All rights reserved.