Question

最近我在javascript中启动了一个新项目（随机密码生成器），但尚未完成的工作尚未完成。（我只是js的初学者）

我有4个字符串，具体取决于检查哪些框我想让它们连接成一个字符串，然后从这一个字符串中随机选择字母，当然如果你知道更好的方法，请告诉我，正如我所说之前，我是js的初学者。

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

因此，带有字符串的警报（仅用于测试）并没有显示出来，这就是为什么我添加了一条带有消息＆＃34;工作？＆＃34;，并且这个没有＆＃39;也出现了。我不明白为什么......我确信问题是这些＆＃34;如果＆＃34;＆＃34;但我不知道如何以另一种方式做到这一点:(有人可以帮帮我吗？

可能我做的一切都完全错了，所以请给我一些tipps。

谢谢！

Answer 1

document.getElementsByClassName从0开始计数，而不是1.因此它应该是0,1,2和3
var string是undefined。您需要2个字符串才能使用concat

工作代码：

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返回一个类似数组的对象，该对象使用从0开始的索引。

当您访问各个节点时，您使用了基于1的索引。

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

由于您只有4个复选框，最后一个索引是3，因此访问[4]会返回undefined，随后会抛出错误，您可以在浏览器控制台中看到该错误。

Answer 3

虽然@Nick是正确的，但您可以将此答案视为增强。

指针，你应该避免全局变量。这是一种不好的做法。

其次，你可以消除if阶梯并实现相同的循环使用。

示例

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;
}

javascript密码生成器无法正常工作

3 个答案:

示例