I did something like this about 6 months back here is an example of the code I used
the script was like this
<div id = "form" class = "form">
<center>Sort Quantity: <input type = "text" id = "MaxNums" name = "Quantity"/>
<button onclick = "ChangeMaxNumbers()">Change</button><br/></center>
By changing the value above you can see the speed of a bubble sort become more inefficient as the maximum number becomes larger
just try from 10 numbers to 100 and the speed is exponentially slower. I wouldn't suggest more than 200 as it might be faster
to sort by pen and paper!
You can see the working example at http://www.lesshardtofind.com/bubble.html
MaxNumbers = document.getElementById("MaxNums").value;
if(MaxNumbers > 1000)
MaxNumbers = 1000;
NumToHeightRatio = 195/MaxNumbers;
In summary I added the function call into the html button click, and then in the function I grabbed the element by its ID and then used the ".value" variable.
I hope this helps