简体   繁体   中英

Display conversion table from 2 user inputs

This is the code I have written using html and javascript and it essentially gets the user input (n) from the first text box and converts miles to kilometres from 0 to n , however, I have now created another text box which needs another user input (x) so then if the user inputs n = 3 and x = 9 it will show the conversions from miles to kilometres starting from 3 all the way till 9 but i'm not sure how to go about that.

<html>
<head>
<script>
function conversion(n)
{
  <!--if(n<=1) return 1;-->
  return n/0.62137;
}

function conversionTable(range)
{
  divStr="<table border=1><tr><td>Miles</td><td>Kilometres</td></tr>";
  for(i=0;i<=range;i++)
    divStr+="<tr><td>" + i + "</td><td>" + conversion(i) + "</td></tr>";
  document.getElementById("divResult").innerHTML=divStr;
}

function getnputValue()
{
  return document.getElementById("rangeTxt").value;
}
</script>
</head>
<body>
<p>
    Start : <input type=textbox id=rangeTxt value=""/>
    Finish : <input type=textbox id=rangeTxt2 value=""/>
    <br>
    <button onClick="conversionTable(getnputValue())">Press to get     result</button>
</p>
<div id="divResult">
</div>
</body>
</html>

Just pass both input's values to conversionTable, the way you did, and instead of starting the loop from 0, use the start value:

 function conversion(n) { <!--if(n<=1) return 1;--> return n/0.62137; } function conversionTable(rangeStart, rangeEnd) { divStr="<table border=1><tr><td>Miles</td><td>Kilometres</td></tr>"; for(i=rangeStart;i<=rangeEnd;i++) divStr+="<tr><td>" + i + "</td><td>" + conversion(i) + "</td></tr>"; document.getElementById("divResult").innerHTML=divStr; } function getnputValue() { return document.getElementById("rangeTxt").value; } 
 <p> Start : <input type=textbox id=rangeTxt value=""/> Finish : <input type=textbox id=rangeTxt2 value=""/> <br> <button onClick="conversionTable(getnputValue(), document.getElementById('rangeTxt2').value)">Press to get result</button> </p> <div id="divResult"> </div> 

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM