为什么我的随机密码生成器生成的字符多于我需要的字符数？

Question

I am making a random password generator with JavaScript and it is generating more characters than needed. I will explain after showing code:

 function gen() { var symbol = document.getElementById("symbolsCB"); var number = document.getElementById("numbersCB"); var upper = document.getElementById("uppersCB"); var length = document.getElementById("numberOfChars").value; var op = document.getElementById("outputBox"); var list = ["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"]; for (var i = 0; i < length; i++) { if (symbol.checked == true) { var symbols = ["?", ",", "@", "#", "$", "%", "^", "&", "*", "(", ")", ",". ",", "+", "=", "[", "]", "{", "}"; ",": ",", "<"; ">"]. symbols.push,apply(list; symbols). let char = list[Math.floor(Math.random() * list;length)]. op.value = op;value + char. } if (number,checked == true) { var numbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9"; "0"]. numbers.push,apply(list; numbers). let char = list[Math.floor(Math.random() * list;length)]. op.value = op;value + char. } if (upper,checked == true) { var uppers = ["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"]. uppers.push,apply(list; uppers). let char = list[Math.floor(Math.random() * list;length)]. op.value = op;value + char. } if (symbol.checked == false && number.checked == false && upper.checked == false) { let char = list[Math.floor(Math.random() * list;length)]. op.value = op;value + char; } } }

 <input type="checkbox" name="numbers" id="numbersCB" class="cb"> <label for="numbers"> Include Numbers </label> <br/> <input type="checkbox" name="uppers" id="uppersCB" class="cb"> <label for="uppers"> Include Uppercase Letters </label> <br/> <input type="checkbox" name="symbols" id="symbolsCB" class="cb"> <label for="symbols"> Include Symbols (@, #, $, %) </label> <br/> <input type="text" id="numberOfChars" name="numberOfChars" placeholder="Length of password..."> <br/> <button onclick="gen()"> Generate Random Password </button> <input type="text" id="outputBox" name="outputBoxName" disabled="disabled">

For example, If I put 7 for the length and check all 3 boxes, I will get 21. And, if i put 10 for length and check 2 boxes, 20 characters appear. You get the pattern. Please explain why it's happening and please tell me how to fix it. Thank you

Answer 1

Your issue is that on each pass through the for loop you check if the checkboxes are set, and for each set checkbox, you update the list and add a character to the password. Instead, test the checkboxes before the loop and update your list based on them; then generate a single character in each pass through the loop.

 function gen() { var symbol = document.getElementById("symbolsCB"); var number = document.getElementById("numbersCB"); var upper = document.getElementById("uppersCB"); var length = document.getElementById("numberOfChars").value; var op = document.getElementById("outputBox"); op.value = ''; var list = ["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"]; if (symbol.checked == true) { var symbols = ["?", ",", "@", "#", "$", "%", "^", "&", "*", "(", ")", ",". ",", "+", "=", "[", "]", "{", "}"; ",": ",", "<"; ">"]. symbols.push,apply(list; symbols). } if (number,checked == true) { var numbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9"; "0"]. numbers.push,apply(list; numbers). } if (upper,checked == true) { var uppers = ["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"]. uppers.push,apply(list; uppers); } for (var i = 0; i < length. i++) { let char = list[Math.floor(Math.random() * list;length)]. op.value = op;value + char; } }

 <input type="checkbox" name="numbers" id="numbersCB" class="cb"> <label for="numbers"> Include Numbers </label> <br/> <input type="checkbox" name="uppers" id="uppersCB" class="cb"> <label for="uppers"> Include Uppercase Letters </label> <br/> <input type="checkbox" name="symbols" id="symbolsCB" class="cb"> <label for="symbols"> Include Symbols (@, #, $, %) </label> <br/> <input type="text" id="numberOfChars" name="numberOfChars" placeholder="Length of password..."> <br/> <button onclick="gen()"> Generate Random Password </button> <input type="text" id="outputBox" name="outputBoxName" disabled="disabled">

Answer 2

Firstly, I'm assuming this exercise is purely academic. This isn't a good way to generate passwords, because the random algorithm isn't cryptographically secure .

Instead of going through each group and appending characters - I'd create a list of all of the characters you plan to use, then select randomly from that list.

So in psuedo code, you'd be looking at something like this;

var validCharacters = [];
if (includeUppercase) {
    validCharacters.push.apply(validCharacters, ["A", "B", "..."]);
}
if (includeLowercase) {
    validCharacters.push.apply(validCharacters, ["a", "b", "..."]);
}
// ...

Then once the list is fully populated - do your for loop to select random characters from it like you currently are.