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

Question

我正在为有关密码生成器的任务工作。 这是我的 HTML 和 JavaScript。 当我单击数字和符号的复选框时，结果返回一个包含“未定义”的密码。 我想问题出在我的复选框状态的 if-else 语句中。 我期望的结果是，无论我点击哪个，结果都不包含任何“未定义”的字母。 有人可以帮我解决这个问题吗？ 谢谢！

 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 function 如果未选中复选框，则返回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 。

因为每次向密码变量添加新字符时都会返回该值，所以添加了“未定义”。 只需添加一个返回空字符串的 else 语句。