CODEWITHSUNDEEP
javascripthtml
user3329255
user3329255

Reputation: 23

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

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>

Upvotes: 2

Views: 13933

Answers (6)

Alex R.
Alex R.

Reputation: 4754

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

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);
<INPUT TYPE=TEXT NAME="ACCOUNT" ID="ACCOUNT" VALUE="" MAXLENGTH=16 SIZE=16>

Working jsFiddle.

Upvotes: 4

Chimdi
Chimdi

Reputation: 379

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>

Upvotes: 0

Saeed
Saeed

Reputation: 926

Please note that:

  1. 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).
  2. Using document.write is not recommended. See this question.

  3. 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);

Upvotes: 0

gaplyk
gaplyk

Reputation: 13

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>

Upvotes: 0

user3329255
user3329255

Reputation: 23

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>

Upvotes: 0

RobG
RobG

Reputation: 147453

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. :-)

Upvotes: 0

Related Questions