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

Question

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>

W3Schools has great tutorial on how to write onclick functions or manipulate DOM elements... — kalsowerus
– kalsowerus, Commented Jul 5, 2017 at 9:30
set id for input tag, using javascript access the input filed and set the value — Azad
– Azad, Commented Jul 5, 2017 at 9:31
I think for a beginner it's better if you watch video tutorials about javascript manipulate DOM element(s) — Beginner
– Beginner, Commented Jul 5, 2017 at 9:31

Mr. Alien · Accepted Answer · 2017-07-05 09:36:31Z

4

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>

edited Jul 5, 2017 at 9:36

answered Jul 5, 2017 at 9:31

Mr. Alien

158k36 gold badges307 silver badges287 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hassan Imam Over a year ago

Great explanation !! :)

Dij · Accepted Answer · 2017-07-05 09:35:49Z

1

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;

edited Jul 5, 2017 at 9:35

answered Jul 5, 2017 at 9:29

Dij

9,8184 gold badges21 silver badges35 bronze badges

1 Comment

kalsowerus Over a year ago

jQuery for this, really?

Honey · Accepted Answer · 2017-07-05 09:31:21Z

0

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;

answered Jul 5, 2017 at 9:31

Honey

3862 gold badges4 silver badges17 bronze badges

Comments

Hassan Imam · Accepted Answer · 2017-07-05 09:31:38Z

0

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>

answered Jul 5, 2017 at 9:31

Hassan Imam

22.6k6 gold badges45 silver badges53 bronze badges

Comments

cmbuckley · Accepted Answer · 2017-07-05 10:25:45Z

0

Give your input an ID, then:

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

edited Jul 5, 2017 at 10:25

cmbuckley

43.1k10 gold badges83 silver badges95 bronze badges

answered Jul 5, 2017 at 9:31

gaback

6381 gold badge6 silver badges13 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related