CODEWITHSUNDEEP
javascripthtmlfunctioninput
codemaniac
codemaniac

Reputation: 67

How can I output javascript with "onclick" into a textfield?

I wrote a javascript program to generate random passwords. How can I output the result into a textfield (input tag)?

var randomString = function(length) {
  var text = "";
  var possible = "!@[|^]µ§$%&?*€#ABCDEFGHIJKLMNOPQRSTVWXYZabcdefghijklmnopqrstvwxyz1234567890";
  for (var i = 0; i < length; i++) {
    text += possible.charAt(Math.floor(Math.random() * possible.length));
  }
  return text;
}

var rs = randomString(16);
console.log(rs);
<section id="passgen">
  <button type="button" id="pass-button" onclick="**???**">Generate Password</button>
  <br><br>
  <input type="text" name="output">
</section>

Upvotes: 2

Views: 1155

Answers (5)

gaback
gaback

Reputation: 638

Give your input an ID, then:

document.getElementById('yourInputID').value = rs;

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157364

It's not a good idea to add an inline click event, you can use addEventListener instead.

So here, I am first selecting the element using document.getElementById and attaching a click event for the same, and later, using document.getElementsByName() I select the output element and print the randomized string.

Also note the [0] which am using with document.getElementsByName() is because if the code encounters multiple elements with the name of output, we select the first one, as it returns an array of matched elements. It will be great if you can add some id to the input field and then use document.getElementById() to select a specific element.

var randomString = function(length) {
  var text = "";
  var possible = "!@[|^]µ§$%&?*€#ABCDEFGHIJKLMNOPQRSTVWXYZabcdefghijklmnopqrstvwxyz1234567890";
  for (var i = 0; i < length; i++) {
    text += possible.charAt(Math.floor(Math.random() * possible.length));
  }
  return text;
}

document.getElementById('pass-button').addEventListener('click', function() {
  document.getElementsByName('output')[0].value = randomString(16);
});
<section id="passgen">
  <button type="button" id="pass-button">Generate Password</button>
  <br>
  <br>
  <input type="text" name="output">
</section>

Upvotes: 4

Dij
Dij

Reputation: 9808

you can do something like this:

var randomString = function(length) {
        var text = "";
        var possible = "!@[|^]µ§$%&?*€#ABCDEFGHIJKLMNOPQRSTVWXYZabcdefghijklmnopqrstvwxyz1234567890";
        for(var i = 0; i < length; i++) {
            text += possible.charAt(Math.floor(Math.random() * possible.length));   
        }
        return text;
    }

    var rs = randomString(16);

    console.log(rs);

    document.getElementsByName('output')[0].value = rs;

Upvotes: 1

Hassan Imam
Hassan Imam

Reputation: 22544

var randomString = function(length) {
        var text = "";
        var possible = "!@[|^]µ§$%&?*€#ABCDEFGHIJKLMNOPQRSTVWXYZabcdefghijklmnopqrstvwxyz1234567890";
        for(var i = 0; i < length; i++) {
            text += possible.charAt(Math.floor(Math.random() * possible.length));   
        }
        return text;
    }

var generatePassword = function(length) {
document.getElementById('password').value = randomString(length);
}
<section id="passgen">
<button type="button" id="pass-button" onclick="generatePassword(16)">Generate Password</button>
<br><br>
<input id='password' type="text" name="output">
</section>

Upvotes: 0

Honey
Honey

Reputation: 386

Very simple document.getElementById("id_of_input_field").value = rs; or else you can use name of input box to target document.getElementsByName('output')[0].value = rs;

Upvotes: 0

Related Questions