SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    add input boxes to a script

    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. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by pmonstad View Post
    I There are three variables I'd like to change to user input boxes: var pick = 6;
    var from = 1; and var to = 49;
    You can change the function so that it's an invokable function.

    From:

    Code:
    (function () {
        ...
    });
    To

    Code javascript:
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    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.

    Code javascript:
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    With the form, let's have a simple one where people can enter the values.

    HTML Code:
    <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:

    Code css:
    #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"

    Code javascript:
    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.

    Code javascript:
    form.onsubmit();

    Some test code for these updates can be found at http://jsfiddle.net/pmw57/9NvQ6/
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •