javascript - Input Number between 1-10, Click Button, Get Result - Stack Overflow

admin管理员组

文章数量:1414614

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 mand 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!

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 mand 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!

• javascript
• html

Share Improve this question Follow edited Aug 18, 2014 at 18:56 John Powell 12.6k66 gold badges6363 silver badges6969 bronze badges asked Jan 12, 2012 at 8:03 Mock26Mock26 7111 gold badge33 silver badges99 bronze badges 1

• Learn about the DOM. – kapa Commented Jan 12, 2012 at 8:07

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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/a9zZL/1/

本文标签： javascriptInput Number between 110Click ButtonGet ResultStack Overflow