JavaScript-密码生成器（复选框）

Question

我正在分配有关密码生成器的作业。这是我的HTML和JavaScript。当我单击数字和符号复选框时，结果将返回一个密码，其中包括“ undefined”。我猜问题出在我的if-else语句中，表示复选框状态。我期望的结果是，无论单击哪个，结果都不会包含任何“ undefined”字母。有人可以帮我解决这个问题吗？谢谢！

const btn = document.querySelector(".btn")
function getChar(num, char) {
  if (document.querySelector("input[name=" + num + "]").checked) {
    return char
  }
}
btn.addEventListener("click", e => {


  if (!document.querySelector("input[name=en]").checked && !document.querySelector("input[name=num]").checked && !document.querySelector("input[name=sym]").checked) {
    return
  }

  let password = ""
  let alphabet = "abcdefghijklmnopqrstuvwxyz"
  let number = "0123456789"
  let symbol = "!@#$%^&*+="

  password += getChar("en", alphabet)
  password += getChar("num", number)
  password += getChar("sym", symbol)


  let result = ""
  for (let i = 0; i < 10; i++) {
    let num = Math.floor(Math.random() * password.length)
    result += password[num]
  }
  console.log(result)
  document.querySelector(".result").innerHTML = result
})

<div class="container">
    <div class="english">
      <label for="en">English letter</label>
      <input type="checkbox" name="en">
    </div>
    <div class="number">
      <label for="num">Number</label>
      <input type="checkbox" name="num">
    </div>
    <div class="symbol">
      <label for="sym">Symbol</label>
      <input type="checkbox" name="sym">
    </div>
    <button class="btn">Generate</button>
    <div class="result"></div>
 </div>

Answer 1

问题是getChar函数在未选中此复选框的情况下返回undefined。可以通过此修改来实现所需的功能：

const btn = document.querySelector(".btn")

function getChar(num) {
  return document.querySelector("input[name=" + num + "]").checked
}

btn.addEventListener("click", e => {
  if (!document.querySelector("input[name=en]").checked && !document.querySelector("input[name=num]").checked && !document.querySelector("input[name=sym]").checked) {
    return
  }

  let password = ""
  let alphabet = "abcdefghijklmnopqrstuvwxyz"
  let number = "0123456789"
  let symbol = "!@#$%^&*+="

  if (getChar("en")) password += alphabet
  if (getChar("num")) password += number
  if (getChar("sym")) password += symbol


  let result = ""
  for (let i = 0; i < 10; i++) {
    let num = Math.floor(Math.random() * password.length)
    result += password[num]
  }
  console.log(result)
  document.querySelector(".result").innerHTML = result
})

<div class="container">
    <div class="english">
      <label for="en">English letter</label>
      <input type="checkbox" name="en">
    </div>
    <div class="number">
      <label for="num">Number</label>
      <input type="checkbox" name="num">
    </div>
    <div class="symbol">
      <label for="sym">Symbol</label>
      <input type="checkbox" name="sym">
    </div>
    <button class="btn">Generate</button>
    <div class="result"></div>
 </div>

Answer 2

[未选中复选框时，其值为undefined。

因为每次将新字符添加到password变量时都返回该值，所以添加了'undefined'。只需添加一个else语句，该语句返回一个空字符串。