javascript - 为什么我的随 secret 码生成器生成的字符比我需要的多？

Question

我正在用 JavaScript 制作一个随 secret 码生成器，它生成的字符比需要的多。我将在显示代码后进行解释:

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

例如，如果我为长度输入 7 并选中所有 3 个框，我将得到 21。并且，如果我为长度输入 10 并选中 2 个框，则会出现 20 个字符。你得到了模式。请解释为什么会这样，请告诉我如何解决它。谢谢

Answer 1

您的问题是，在每次通过 for 循环时，您都会检查是否设置了复选框，并且对于每个设置的复选框，您更新列表并向密码添加一个字符。相反，在循环之前测试复选框并根据它们更新您的列表；然后在每次循环中生成一个字符。

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