Why is my password generator showing the password before I click the button?

Question

The function generates, but it does it every time I refresh the browser, I'm trying to make it so every time I click the button, the string appears and then generates a new one. Any help would be appreciated!!

    <body>
  <button type="button" onclick="generatePassword()">GENERATE</button>
  <p id="demo"></p>

<script>

function generatePassword(length = 12) {
    let generatedPassword = "";

    const validChars = "0123456789" +
        "abcdefghijklmnopqrstuvwxyz" +
        "ABCDEFGHIJKLMNOPQRSTUVWXYZ" +
        ",.-{}+!\"#$%/()=?";

    for (let i = 0; i < length; i++) {
        let randomNumber = crypto.getRandomValues(new Uint32Array(1))[0];
        randomNumber = randomNumber / 0x100000000;
        randomNumber = Math.floor(randomNumber * validChars.length);

        generatedPassword += validChars[randomNumber];
    }

    return generatedPassword;

  }

  document.getElementById("demo").innerHTML = generatePassword();


</script>

</body>

`document.getElementById("demo").innerHTML = generatePassword();` calls the function and displays its result. Inline event handlers like `onclick` are [not recommended](/q/11737873/4642212). They are an [obsolete, hard-to-maintain and unintuitive](/a/43459991/4642212) way of registering events. Always [use `addEventListener`](//developer.mozilla.org/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. — Sebastian Simon, Dec 13 '21 at 02:35

Samathingamajig · Accepted Answer · 2021-12-13T02:44:17.107

Because you're calling generatePassword in the code itself. Use this instead

    <body>
  <button type="button" onclick="generatePassword()">GENERATE</button>
  <p id="demo"></p>

<script>

function generatePassword(length = 12) {
    let generatedPassword = "";

    const validChars = "0123456789" +
        "abcdefghijklmnopqrstuvwxyz" +
        "ABCDEFGHIJKLMNOPQRSTUVWXYZ" +
        ",.-{}+!\"#$%/()=?";

    for (let i = 0; i < length; i++) {
        let randomNumber = crypto.getRandomValues(new Uint32Array(1))[0];
        randomNumber = randomNumber / 0x100000000;
        randomNumber = Math.floor(randomNumber * validChars.length);

        generatedPassword += validChars[randomNumber];
    }

    document.getElementById("demo").innerHTML = generatedPassword;
  }
</script>

</body>

Or even better, don't say onclick="..." on the element itself:

    <body>
  <button type="button" id="generateButton">GENERATE</button>
  <p id="demo"></p>

<script>

function generatePassword(length = 12) {
    let generatedPassword = "";

    const validChars = "0123456789" +
        "abcdefghijklmnopqrstuvwxyz" +
        "ABCDEFGHIJKLMNOPQRSTUVWXYZ" +
        ",.-{}+!\"#$%/()=?";

    for (let i = 0; i < length; i++) {
        let randomNumber = crypto.getRandomValues(new Uint32Array(1))[0];
        randomNumber = randomNumber / 0x100000000;
        randomNumber = Math.floor(randomNumber * validChars.length);

        generatedPassword += validChars[randomNumber];
    }

    return generatedPassword;
  }

  document.getElementById("generateButton").addEventListener("click", () => document.getElementById("demo").textContent = generatePassword());

</script>

</body>

@SebastianSimon You're right, fixed – Samathingamajig Dec 13 '21 at 02:45 — Samathingamajig, Dec 13 '21 at 02:45

Why is my password generator showing the password before I click the button?

1 Answers1