I absolutely have no clue why it's printing an integer. I am absolutely stomped

I am learning how to code and hopefully, one day, get good enough to help others like yourselves! I am doing a random password generator and yes, it is a coding challenge. I got it to print to the screen but it’s not printing the password but throws a single integer. i.e. applying true values to all the prompts and 86 as the characters I want for the password prints a 6. I am baffled and bashing my head on the desk! is this normal for coders? LOL. Edit: Also, it sometimes prints out undefined. I apologize ahead for the pro coders who will look at this coding and bash their head too <3

// Assignment Code
var generateBtn = document.querySelector("#generate");

// Write password to the #password input
function writePassword() {
var password = generatePassword();
var passwordText = document.querySelector("#password"); //this is targeted for the body section where it places the password inside the dotted box.
  
passwordText.value = password;

}

function generatePassword() {
 
    const numbers = ["0","1", "2", "3", "4", "5", "6", "7", "8", "9"];
    const capitalLetters = ["A","B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
    const lowCaseLetters = ["A","B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"];
    const toLowerCase = lowCaseLetters.map(lowCaseletters => lowCaseletters.toLowerCase())
    console.log(toLowerCase);
    const specialCharaters = ["!", "@", "%", "#", "^", "&", "*", ")", "("]
    
    //all possible combinations added here:
    const random0 = [numbers, capitalLetters, toLowerCase, specialCharaters];
    const random1 = [numbers, capitalLetters, toLowerCase];
    const random2 = [numbers, capitalLetters];
    const random3 = [numbers, specialCharaters];
    const random4 = [numbers, toLowerCase];
    const random5 = [numbers];
            //captial letters array
    const random6 = [capitalLetters, toLowerCase, specialCharaters];
    const random7 = [capitalLetters, toLowerCase];
    const random8 = [capitalLetters, specialCharaters];
    const random9 = [capitalLetters];
            //lowercase array
    const random10 = [toLowerCase, specialCharaters];
    const random11 = [toLowerCase];
            //special character array 
    const random12 = [specialCharaters];
    
    //four arrays combined into one. 
    // const masterArray  = [...numbers, ...capitalLetters, ... toLowerCase, ... specialCharaters];
    
    
    alert("Welcome to Kurtis's Password Generator! Password cannot less than 7 characters or no more than 128 characters.");
    let dnumConfirm = confirm("Do you want numbers in your password?");
    let capConfirm = confirm("Do you want capital letters in your password?");
    let lowConfirm = confirm("Do you want lowercase letters in your password?");
    let specialConfirm = confirm("Do you want special characters in your password?");
    let userInput = prompt("How many capital letters would you like?");
    
    if((userInput < 8) || (userInput > 128)) {
        alert("You must enter password more than 8 and less than 128 characters.");
        writePassword();
    }  
     
    if(dnumConfirm && capConfirm && lowConfirm && specialConfirm) {
        
        let randomPassword = "";
        for(var i =0; i < userInput.length; i++) {
             randomPassword += userInput[Math.floor(Math.random() * random0.length)];
            //  console.log(randomPassword);
             return randomPassword;
        }
    
        } else if(dnumConfirm && capConfirm && lowConfirm && !specialConfirm) {
        
            let randomPassword = "";
            for(var i =0; i < userInput.length; i++) {
                randomPassword += userInput[Math.floor(Math.random() * random1.length)];
                return randomPassword;
            }
    
        } else if(dnumConfirm && capConfirm && !lowConfirm && !specialConfirm) {
            let randomPassword = "";
            for(var i =0; i < userInput.length; i++) {
                randomPassword += userInput[Math.floor(Math.random() * random2.length)];
                return randomPassword;
            }
    
        } else if(dnumConfirm && !capConfirm && !lowConfirm && specialConfirm) {
            let randomPassword = "";
            for(var i =0; i < userInput.length; i++) {
                randomPassword += userInput[Math.floor(Math.random() * random3.length)];
                return randomPassword;
            }
        
        } else if(dnumConfirm && !capConfirm && !lowConfirm && !specialConfirm) {
    
          let randomPassword = "";
          for(var i =0; i < userInput.length; i++) {
               randomPassword += userInput[Math.floor(Math.random() * random5.length)];
               return randomPassword;
          }
    
        } else if(dnumConfirm && !capConfirm && !lowConfirm && specialConfirm) {
            let randomPassword = "";
            for(var i =0; i < userInput.length; i++) {
            randomPassword += userInput[Math.floor(Math.random() * random3.length)];
            return randomPassword;
          }
        
        } else if (!dnumConfirm && capConfirm && lowConfirm && specialConfirm) {
            let randomPassword = "";
            for(var i =0; i < userInput.length; i++) {
              randomPassword += userInput[Math.floor(Math.random() * random6.length)];
              return randomPassword;
            }
    
        } else if (!dnumConfirm && capConfirm && lowConfirm && !specialConfirm) {
            let randomPassword = "";
            for(var i =0; i < userInput.length; i++) {
                randomPassword += userInput[Math.floor(Math.random() * random7.length)];
                return randomPassword;
        }
    
        } else if (!dnumConfirm && !capConfirm && lowConfirm && specialConfirm) {
            let randomPassword = "";
            for(var i =0; i < userInput.length; i++) {
            randomPassword += userInput[Math.floor(Math.random() * random10.length)];
            return randomPassword;
        }
    
        } else if (!dnumConfirm && capConfirm && !lowConfirm && !specialConfirm) {
            let randomPassword = "";
            for(var i =0; i < userInput.length; i++) {
                randomPassword += userInput[Math.floor(Math.random() * random9.length)];
                return randomPassword;
            }
    
        } else if (!dnumConfirm && capConfirm && !lowConfirm && specialConfirm) {
            let randomPassword = "";
            for(var i =0; i < userInput.length; i++) {
                randomPassword += userInput[Math.floor(Math.random() * random8.length)];
                  return randomPassword;
            }
       
        } else if(!dnumConfirm && !capConfirm && lowConfirm && !specialConfirm) {
            let randomPassword = "";
            for(var i =0; i < userInput.length; i++) {
                randomPassword += userInput[Math.floor(Math.random() * random11.length)];
                return randomPassword;
            }
    
    
        } else if (!dnumConfirm && !capConfirm && !lowConfirm && specialConfirm) {
            let randomPassword = "";
            for(var i =0; i < userInput.length; i++) {
                randomPassword += userInput[Math.floor(Math.random() * random12.length)];
                return randomPassword;
            }
    
    
        } else if(dnumConfirm && !capConfirm && lowConfirm && !specialConfirm) {
            let randomPassword = "";
            for(var i =0; i < userInput.length; i++) {
                randomPassword += userInput[Math.floor(Math.random() * random4.length)];
                return randomPassword;
            }
    
        } 


}

// Add event listener to generate button. My note: the below "generateBtn" is linked to the variable assignment code. And the assignment code is targeted to the 
// to the button section in html
generateBtn.addEventListener("click", writePassword);
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body,
.wrapper {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: sans-serif;
  background-color: #f9fbfd;
}

.wrapper {
  padding-top: 30px;
  padding-left: 20px;
  padding-right: 20px;
}

header {
  text-align: center;
  padding: 20px;
  padding-top: 0px;
  color: hsl(206, 17%, 28%);
}

.card {
  background-color: hsl(0, 0%, 100%);
  border-radius: 5px;
  border-width: 1px;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px 0px;
  color: hsl(206, 17%, 28%);
  font-size: 18px;
  margin: 0 auto;
  max-width: 800px;
  padding: 30px 40px;
}

.card-header::after {
  content: " ";
  display: block;
  width: 100%;
  background: #e7e9eb;
  height: 2px;
}

.card-body {
  min-height: 100px;
}

.card-footer {
  text-align: center;
}

.card-footer::before {
  content: " ";
  display: block;
  width: 100%;
  background: #e7e9eb;
  height: 2px;
}

.card-footer::after {
  content: " ";
  display: block;
  clear: both;
}

.btn {
  border: none;
  background-color: hsl(360, 91%, 36%);
  border-radius: 25px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 6px 0px rgba(0, 0, 0, 0.2) 0px 1px 1px
    0px;
  color: hsl(0, 0%, 100%);
  display: inline-block;
  font-size: 22px;
  line-height: 22px;
  margin: 16px 16px 16px 20px;
  padding: 14px 34px;
  text-align: center;
  cursor: pointer;
}

button[disabled] {
  cursor: default;
  background: #c0c7cf;
}

.float-right {
  float: right;
}

#password {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  display: block;
  width: 100%;
  padding-top: 15px;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 85px;
  font-size: 1.2rem;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 10px;
  border: 2px dashed #c0c7cf;
  border-radius: 6px;
  resize: none;
  overflow: hidden;
}

@media (max-width: 690px) {
  .btn {
    font-size: 1rem;
    margin: 16px 0px 0px 0px;
    padding: 10px 15px;
  }

  #password {
    font-size: 1rem;
  }
}

@media (max-width: 500px) {
  .btn {
    font-size: 0.8rem;
  }
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Password Generator</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="wrapper">
      <header>
        <h1>Password Generator</h1>
      </header>
      <div class="card">
        <div class="card-header">
          <h2>Generate a Password</h2>
        </div>
        <div class="card-body">
          <textarea
            readonly
            id="password"
            placeholder="Your Secure Password"
            aria-label="Generated Password"
          ></textarea>
        </div>
        <div class="card-footer">
          <button id="generate" class="btn">Generate Password</button>
        </div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

3 thoughts on “I absolutely have no clue why it's printing an integer. I am absolutely stomped”

Leave a Comment