I'm trying to create a login form with a password generator so my problem is that I want to generate 3 tokens, What I have been attempting to do generates only 1 token per click. So instead of only 1 password token that will be generated is there any way that 3 password tokens will be generated instead?
const CHARS =
"0123456789abcdefghijklmnopqrstuvwxyz!@#$%^&*()ABCDEFGHIJKLMNOPQRSTUVWXYZ";
const randomCharacter = (chars) => () => chars[Math.floor(Math.random() * chars.length)];
const generatePassword = (chars) => (length) => () => [...Array(length)].map(randomCharacter(chars)).join("");
const passwordInput = document.querySelector("#password");
const generatePasswordChars = generatePassword(CHARS);
const generatePasswordChars12 = generatePasswordChars(12);
document.querySelector("#generate-button").addEventListener("click", () => {
passwordInput.value = generatePasswordChars12();
});
document.querySelector("#copy-button").addEventListener("click", () => {
navigator.clipboard
.writeText(passwordInput.value)
.catch(() =>
console.error("Can't copy (you need to open this in its own window).")
);
});<div class="body">
<div class="box">
<h2>Random Password Generator</h2>
<input type="text" placeholder="Create password" id="password" readonly />
<div class="actions">
<button id="generate-button">Generate</button>
<button id="copy-button">Copy</button>
</div>
</div>
</div>
<div class="body">
<div class="box">
<h3>Login</h3>
<input type="text" placeholder="Enter Password" id="passcode" readonly />
<div class="actions">
<button id="enter-button">Enter</button>
</div>
</div>
</div>