javascript密码生成器不起作用

Question

Recently I started a new project (random password generator) in javascript and something isn't working its not finished yet. (Im just a beginner in js)

i have 4 string, depending on which boxes are checked i want them to connect in one string and then randomly select letters from this one string, of course if you know a better way to do that please tell me, as i said before, I am a beginner in js.

 var uppercase_letters = ['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']; var lowercase_letters = ['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']; var numbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0']; var symbols = ['/', '[', ']', '$', '-', ':', '_', '?', '{', '}', '~', '!', '@', '#', '%', '&', '*', '(', ')', '"', '^', '§', ',', '.', '°', '+', '-', ':']; var length; //-------------------- var check1; var check2; var check3; var check4; var inputnum; function getvalues() { inputnum = document.getElementById("length").value; length = inputnum; check1 = document.getElementsByClassName("check")[1]; check2 = document.getElementsByClassName("check")[2]; check3 = document.getElementsByClassName("check")[3]; check4 = document.getElementsByClassName("check")[4]; generatestring(); } function generatestring() { var string; if (check1.checked === true) { string = string.concat(uppercase_letters) }; if (check2.checked === true) { string = string.concat(lowercase_letters) }; if (check3.checked === true) { string = string.concat(numbers) }; if (check4.checked === true) { string = string.concat(symbols) }; alert("Working?"); show(string); } function show(string) { alert(string); } 

 <div class='container'> <input type='checkbox' class='check' value='uppercase'>uppercase letters <br /> <input type='checkbox' class='check' value='lowercase'>lowercase letters <br /> <input type='checkbox' class='check' value='number'>numbers <br /> <input type='checkbox' class='check' value='symbol'>symbols <br /> <input type='number' id='length' value='length'> <br /> <br /> <input type='button' id='generate' value='generate' onclick="getvalues()"> </div> 

So, the alert with the string (just for testing) isn't showing up, thats why i added the one with the message "Working?", and this one isn't showing up as well. I have no idea why... I am sure that the problem are these "if's" but i don't know how to do it in another way :( Could someone please help me out?

Probably I am doing everything completly wrong, so please give me some tipps.

Thank you!

Answer 1

• document.getElementsByClassName counts from 0, not 1. So it should be 0, 1, 2 and 3
• var string is undefined . You need 2 strings to use concat

Working code:

 var uppercase_letters = ['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']; var lowercase_letters = ['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']; var numbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0']; var symbols = ['/', '[', ']', '$', '-', ':', '_', '?', '{', '}', '~', '!', '@', '#', '%', '&', '*', '(', ')', '"', '^', '§', ',', '.', '°', '+', '-', ':']; var length; //-------------------- var check1; var check2; var check3; var check4; var inputnum; function getvalues() { inputnum = document.getElementById("length").value; length = inputnum; check1 = document.getElementsByClassName("check")[0]; check2 = document.getElementsByClassName("check")[1]; check3 = document.getElementsByClassName("check")[2]; check4 = document.getElementsByClassName("check")[3]; generatestring(); } function generatestring() { var string = ''; if (check1.checked === true) { string = string.concat(uppercase_letters) }; if (check2.checked === true) { string = string.concat(lowercase_letters) }; if (check3.checked === true) { string = string.concat(numbers) }; if (check4.checked === true) { string = string.concat(symbols) }; alert("Working?"); show(string); } function show(string) { alert(string); } 

 <div class='container'> <input type='checkbox' class='check' value='uppercase'>uppercase letters <br /> <input type='checkbox' class='check' value='lowercase'>lowercase letters <br /> <input type='checkbox' class='check' value='number'>numbers <br /> <input type='checkbox' class='check' value='symbol'>symbols <br /> <input type='number' id='length' value='length'> <br /> <br /> <input type='button' id='generate' value='generate' onclick="getvalues()"> </div> 

Answer 2

getElementsByClassName returns an array-like object, which uses 0-based indices.

When you accessed the various nodes, you did so using 1-based indices.

check1 = document.getElementsByClassName("check")[1];
check2 = document.getElementsByClassName("check")[2];
check3 = document.getElementsByClassName("check")[3];
check4 = document.getElementsByClassName("check")[4];

As you only have 4 checkboxes, the last index is 3, so accessing [4] returns undefined which subsequently throws an error, which you can see in your browser console.

Answer 3

Though @Nick is correct, you can consider this answer as enhancement.

A pointer, you should avoid global variables. Its a bad practice.

Second, you can eliminate if ladder and achieve same using loops.

Sample

JSFiddle

var characters = [uppercase_letters, lowercase_letters, numbers, symbols];
.
.
.
var string = "";
var els = document.getElementsByClassName("check");
for (var i = 0; i < els.length; i++) {
  string = (els[i].checked) ? string.concat(characters[i]) : string;
}