Password gen only outputs 1 char per click

JavaScript
1

I have to build a password generator, but when I click on the “Generate Passwords” button, it outputs 1 character at a time, I need it to input 15. What can I do please? Thank you all!

<!doctype html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <h1>Generate a</h1>
        <h2>random password</h2>
        <p>Never use an insecure password again</p>
        <button id="pw-gen" onclick="generating()">Generate Passwords</button>
        <div id="pws">
            <div id="pw1"></div>
            <div id="pw2"></div>
        </div>
        <script src="index.js"></script>
    </body>
</html>

const characters = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9","~","`","!","@","#","$","%","^","&","*","(",")","_","-","+","=","{","[","}","]",",","|",":",";","<",">",".","?", "/"];
let pw1 = document.getElementById("pw1")
let pw2 = document.getElementById("pw2")
function generating(long) {
    let password =""
    let newpw1 = Math.floor(Math.random() * characters.length)
    let newpw2 = Math.floor(Math.random() * characters.length)
    pw1.textContent += characters[newpw1]
    pw2.textContent += characters[newpw2]
}
2

This will only ever give you a single index that you later use to concatenate a character from the characters array. If you want 15 characters, then modify the function to return a single character (not sure why you have a newpw1 and newpw2). Maybe rename the function randomCharacter or something like that. Then, have a generatePassword function that initializes an empty string and then concatenates the result of calling the randomCharacter function 15 times.

I am assuming you want the password to be 15 characters long. If that is not what you meant by the number 15 reference, please let me know.

3

That is correct, I now need it to be 15 characters long, but I would also need to be able to change that as needed/wished. I have a newpw1 and newpw2 because I was assigned to make the program output 2 different passwords so the user can have their pick. Is that done correctly?
Based on your recommendation, this is what I have:

<!doctype html>
<html>
    <head>
        <title></title>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <h1>Generate a</h1>
        <h2>random password</h2>
        <p>Never use an insecure password again</p>
        <button id="pw-gen" onclick="generatePassword()">Generate Passwords</button>
        <div id="pws">
            <div id="pw1"></div>
            <div id="pw2"></div>
        </div>
        <script src="index.js"></script>
    </body>
</html>

const characters = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9","~","`","!","@","#","$","%","^","&","*","(",")","_","-","+","=","{","[","}","]",",","|",":",";","<",">",".","?", "/"];
let pw1 = document.getElementById("pw1")
let pw2 = document.getElementById("pw2")

function generatePassword() {
    for (let i=0; i<15; i++){
        
    randomCharacter()
    }
}

function randomCharacter() {
    let newpw1 = Math.floor(Math.random() * characters.length)
    let newpw2 = Math.floor(Math.random() * characters.length)
    pw1.textContent += characters[newpw1]
    pw2.textContent += characters[newpw2]
}

It works fine, but now I’m wondering if it’s not too confusing if someone else were to read it.

Thank you for your help!!

4

Have the user specify this or just change it in the code. If the latter, then I would create a global variable like const NUM_PASSWORD_CHARS = 15; and place this at the top and change as necessary. If the former, you will need to add an input element and use the value entered as an argument to the generatePassword function. You would of course need to add a parameter to the function so an argument passed to the function could be accessed.

Your code would be more readable like this:

function randomCharacter() {
  const randomIndex = Math.floor(Math.random() * characters.length)
  return characters[randomIndex]
}

function createPassword() {
  let password = ""
  for (let  i= 0; i < 15; i++) {
    password += randomCharacter()
  }
  return password
}

function generatePasswords() {
  pw1.textContent += createPassword()
  pw2.textContent += createPassword()
}

const characters = ["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9","~","`","!","@","#","$","%","^","&","*","(",")","_","-","+","=","{","[","}","]",",","|",":",";","<",">",".","?", "/"];
let pw1 = document.getElementById("pw1")
let pw2 = document.getElementById("pw2")

Then your HTML would be:

<button id="pw-gen" onclick="generatePasswords()">Generate Passwords</button>

You have an issue that you may or may not have already noticed with your code or the version I created above. It does not account for how certain characters are rendered to the page. I would revisit the Convert HTML Entities challenge for how you could fix that.

5

I checked it out and honestly, I don’t know anything about that. This is the first time I ever hear about converting HTML entities. I’ll take a deeper look. Thank you!