adding a result of a calculation to a span with javascript after a button is clicked

Question

Hi I'm new to javascript and I would like you to help me figure out why I can't get the result of the random number generator to appear in the span tag after the user clicks a calculate button using the min and max number they entered. I believe there is nothing wrong with the random number function it's just when I want to use the random number function as an event handler for the onclick event for the button it doesn't work. well, what I did was, I made a function called answer to gather the users input and to use that input as a parameter for the the random number function that is being called inside the answer function.

Then I used the answer function as an event handler for the onclick thinking that it would have the result of the the random number generator and would apply that to the onclick. and I stored that in var called storage so I could place the result of the event in the span tag later.

Here is the js fiddle of the code. can you help me solve my problem by getting the result of the random_number function in to the span $("output") after the button $("calculate") click?

only pure javascript, no jquery please.

Thank you in advance for your help. and I'm sorry if I got terminology wrong and for bad spelling. http://jsfiddle.net/jack2ky/WDyMd/

        <label for="min">Enter the min:</label>
    <input type="text" id = "min" /> <br />

    <label for="max">Enter the max:</label>
    <input type="text" id = "max" /> <br />

    <input type="button" id = "calculate" value = "calculate"/>
    <span id ="output">&nbsp;</span>
<script>

    var $ = function(id){
        return document.getElementById(id);
    }
window.onload = function () {


    var random_number = function(min, max, digits){
        digits = isNaN(digits) ? 0 : parseInt(digits);

        if(digits < 0){
            digits = 0;
        }else if (digits > 16){
            digits = 16
        }
        if(digits == 0){
            return Math.floor(Math.random() * (max - min +1)) +min;
        }else {
            var rand = Math.random() * (max - min) + min;
            return parseFloat(rand.toFixed(digits));
        }
    }


    var storage = $("calculate").onclick = answer;

     var answer = function(){
            var miny = $("min").value;
            var maxy = $("max").value;
            return random_number(miny, maxy);
     }
    $("output").firstChild.nodeValue = storage;

}

</script>

</body>
</html>

Answer 1

var storage = $("calculate").onclick = answer;
...
$("output").firstChild.nodeValue = storage;

These two statements are called on page load. What is happening is you are changing the value of variable storage but the statement var storage = $("calculate").onclick = answer; is being called only once when the page loads. You need to update the answer when user clicks the button. So you can remove $("output").firstChild.nodeValue = storage; and update the answer function like:

 var answer = function(){               
                var miny = parseInt( $("min").value );              
                var maxy = parseInt( $("max").value );                      
                var ans = random_number(miny, maxy);                
                $("output").innerHTML = ans;
         }