Generating a random number in JavaScript and passing it to an HTML input tag

Question

My script, stored as a separate js file:

function randomNumber(len) {
    var randomNumber;
    var n = '';

    for(var count = 0; count < len; count++) {
        randomNumber = Math.floor(Math.random() * 10);
        n += randomNumber.toString();
    }

    return n;
}

var finalSequence = randomNumber(9);

document.write('<INPUT TYPE=TEXT NAME="ACCOUNT" VALUE='+finalSequence +' MAXLENGTH=16 SIZE=16>');

I have included this td tag in my html file:

<td align=left><FONT FACE="Arial,Helvetica"><script src="nexgen.js"></script>

Do you suggest that I write my script inside the html file itself?

I would like to display the generated random number using an input tag, such as that below. How do I do this?

<INPUT TYPE=TEXT NAME="ACCOUNT" VALUE= ???  MAXLENGTH=16 SIZE=16>

Update:

I am combining the JavaScript and html in one html file as follows. Please see if you can find any mistakes because the number generated is not being displayed on html page.

Javascript part:

function randomNumber(len) {
    var randomNumber;
    var n = '';

    for(var count = 0; count < len; count++) {
        randomNumber = Math.floor(Math.random() * 10);
        n += randomNumber.toString();
    }

    document.getElementById("ACCOUNT").value = n;
    return n;
}

HTML part:

<tr>
  <td><FONT FACE="Arial,Helvetica" color="red"> Transaction ID: </font></td>
  <td align=left>
    <FONT FACE="Arial,Helvetica">
      <script> randomNumber(9); </script>
      <INPUT TYPE=TEXT NAME="ACCOUNT" ID="ACCOUNT" VALUE="" MAXLENGTH=16 SIZE=16 readonly>
    </font>
  </td>
</tr>

I am combining the javascript and html in one html file. as follows. please see if you can find any mistakes because the number generated is not being displayed on html page. — user3329255, Mar 11 '14 at 06:13

score 4 · Accepted Answer · answered Mar 11 '14 at 03:05

4

Assign an ID to your input element, then in your JavaScript, assign the generated value to that element.

Html be like:

<INPUT TYPE=TEXT NAME="ACCOUNT" ID="ACCOUNT" VALUE=""  MAXLENGTH=16 SIZE=16>

JavaScript be like:

function randomNumber(len) {
    var randomNumber;
    var n = '';

    for(var count = 0; count < len; count++) {
        randomNumber = Math.floor(Math.random() * 10);
        n += randomNumber.toString();
    }
    return n;
}

document.getElementById("ACCOUNT").value = randomNumber(9);

Working jsFiddle.

answered Mar 11 '14 at 03:05

Alex R.

4,394
4
28
40

while the logic seems to be correct.thanks, but the number is not displaying for my html. only an input box is being displayed Transaction ID: My html lines for displaying the number generated. – user3329255 Mar 11 '14 at 05:37
@user3329255 I assume your script is in _nexgen.js_? Make sure that the function is called on document ready or window load--e.g. `window.onload = function() { document.getElementById("ACCOUNT").value = randomNumber(9); };` See the updated [jsFiddle](http://jsfiddle.net/u5u8f/1/) – Alex R. Mar 11 '14 at 06:15

score 0 · Answer 2 · edited Nov 21 '16 at 23:19

Something like this, but you can do that in different ways:

http://jsbin.com/hujefopa/1/edit

function rand(len){
  return Math.floor(Math.random() * Math.pow(10, len));
}

function setRand(){
   document.getElementById('rand').value = rand(9); 
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body onload="setRand()">
  <input type="text" id="rand">
</body>
</html>

RobG · Answer 3 · 2014-03-11T03:36:20.533

BTW, if you want to generate a random number of a certain length, you can do it in much bigger chunks than one digit at a time, e.g.:

function longRandom(length) {
  var n = '';
  while (n.length < length) {
    n += ('' + Math.random()).split('.')[1];
  }
  return n.substr(0, length);
}

console.log(longRandom(42)); // 134434793311713322660940870849409308530315

will do it in chunks of about 15 digits on each loop. :-)

score 0 · Answer 4 · edited May 23 '17 at 12:24

Please note that:

If your script is small, it's better to put it inside the page itself rather than importing a new file (new request to the server).
Using document.write is not recommended. See this question.

To update the value of html input you can use:

document.getElementById('id-of-your-input-element').value = newValue;

or using jQuery:

$('#id-of-your-input-element').val(newValue);

score 0 · Answer 5 · answered Mar 11 '14 at 16:06

A random number is generated using javascript and also passed in the input form tag in html using code similar to ones mentioned below.

Javascript :

function randomNumber(len) {
    var randomNumber;
    var n = '';

    for(var count = 0; count < len; count++) {
        randomNumber = Math.floor(Math.random() * 10);
        n += randomNumber.toString();
    }
    return n;
}

window.onload = function() {
document.getElementById("ACCOUNT").value = randomNumber(9);
};

HTML part:

<INPUT TYPE=TEXT NAME="ACCOUNT" ID="ACCOUNT" VALUE=""  MAXLENGTH=16 SIZE=16>

score 0 · Answer 6 · edited Mar 31 '19 at 15:24

HTML PART

    <tr>
    <td><FONT FACE="Arial,Helvetica" color="red"> Transaction ID: </font></td>
    <td align=left>
    <FONT FACE="Arial,Helvetica">
    <INPUT TYPE=TEXT NAME="ACCOUNT" ID="ACCOUNT" VALUE="" MAXLENGTH=16 SIZE=16 
    readonly>
    </font>
    </td>
    </tr>

JavaScript Part

     <script>
    document.getElementById('ACCOUNT').value=Math.floor(Math.random() * 10);
    </script>

Generating a random number in JavaScript and passing it to an HTML input tag

6 Answers6