Question

I am just learning Javascript and I am trying to create a script that will ask the user to input a number and the script will then print out a result from an array. I have figured out how to do that with the prompt command but want to learn how to do it using a input field on the webpage so that the user will type in the number, hit a button, and it will then run the script.

Here is what I have written:

Header script:

do {
   var num = prompt('Enter a number between 1 and 10?','');
   num = parseInt(num, 10);
} while (isNaN(num));

var surge = [
    'One',
    'Two',
    'Three',
    'Four',
    'Five',
    'Six',
    'Seven',
    'Eight',
    'Nine',
    'Ten'
];

Body script:

document.write(surge[num-1]);

I have no idea how to transform this to an input field/button format and keep the do/while to ensure that a number is entered. Also, how would I change the do/while so that it will also ensure that a number greater than 10 cannot be entered and ensure that it is a number? Any and all help will be greatly appreciated. Thanks!

Answer 1

Sample HTML:

<input type='text' id='number' />
<input type='button' id='add' value="click" />
<div id='numbers'> </div>

and script for this

var surge = [ 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten' ];

//helper function for get elements
var get = function( id ) {
    return document.getElementById( id );
};

//add handle to click event on '#add' button 
get( "add" ).onclick = function () {

    // get value of #number input
    var n = get( "number" ),
        s = surge[ n.value -1];

    //if element in surge at index n.value - 1 is present
    if( s ) {    
        // write this in next paragraph which is pushed to div#numbers
        get( "numbers" ).innerHTML += "<p>" + s + "</p>";
    };

    //reset value of input #number
    n.value = ""

};

Demo on: http://jsfiddle.net/a9zZL/1/