Add input boxes to a script

JavaScript
1

I have found a script on net and a newbie like me can’t fint out how to tweek the script to support some user input. There are three variables I’d like to change to user input boxes: var pick = 6;
var from = 1; and var to = 49;

Can someone help me? The script is found at www.limesurvey.no/ord/lotto.html

2

You can change the function so that it’s an invokable function.

From:


(function () {
    ...
});

To


var lotto = function (pick, from, to) {
    ...
};

After that, you would need to remove those variable assignments in there.
Further work needs to be done too in regard to the document.write part, because any time you run the function, you don’t want that document.write to replace the entire contents of the page.

3

When dealing with the document.write issue, the simple approach is to check if a container already exists on the page for the update.
If a container doesn’t exist, create one, then place the updated content in there.


var container = document.getElementById('container');
if (!container) {
    container = document.createElement('div');
    container.id = 'container';
}

container.innerHTML = ...;

document.body.appendChild(container);

Now we can focus on using a form to enter in set values for the lotto function.

4

With the form, let’s have a simple one where people can enter the values.


<form id="lotto">
    <p>
        Pick <input type="number" name="pick" value="6" />
        From <input type="number" name="from" value="1" />
        To <input type="number" name="to" value="49" />
        <input type="submit" value="Update lucky dip" />
    </p>
</form>

The inputs can be made narrower too, to help indicate to people that they are just for numbers:


#lotto input[type="number"] {
    width: 3em;
}

We can now tell the onsubmit event to get the values from the form, and send them to the lotto function.
We can also ensure that they are received as numbers, so that “1” + 23 doesn’t result in “123”


var form = document.getElementById('lotto');
form.onsubmit = function () {
    var form = this,
        pick = Number(this.elements.pick.value) || 0,
        from = Number(this.elements.from.value) || 0,
        to = Number(this.elements.to.value) || 0;
    
    lotto(pick, from, to);
        
    // prevent default HTML submit action
    return false;
};

And, we can also trigger the onsubmit event when the page starts, which shows the lucky dip with the default settings.

    
form.onsubmit();

Some test code for these updates can be found at http://jsfiddle.net/pmw57/9NvQ6/