[英]JavaScript - Password Generator (checkbox)
I am working for an assignment about a password generator.我正在为有关密码生成器的任务工作。 Here is my HTML and JavaScript.
这是我的 HTML 和 JavaScript。 When I click the checkbox for number and symbol, the result returns a password including "undefined".
当我单击数字和符号的复选框时,结果返回一个包含“未定义”的密码。 I guess the issue is from my if-else statement for checkbox status.
我想问题出在我的复选框状态的 if-else 语句中。 What the result I expected is that whichever I click, the result does not include any letter of "undefined".
我期望的结果是,无论我点击哪个,结果都不包含任何“未定义”的字母。 Could someone help me with this issue?
有人可以帮我解决这个问题吗? Thank you!
谢谢!
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>
The problem was that the getChar
function, returns undefined
if the check-box isn't checked.问题是
getChar
function 如果未选中复选框,则返回undefined
。 The desired functionality can be achieved by this modifications:通过以下修改可以实现所需的功能:
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>
When a checkbox is unchecked, it's value is undefined
.未选中复选框时,其值为
undefined
。
Because you return the value every time when you add new characters to the password variable, you add 'undefined'.因为每次向密码变量添加新字符时都会返回该值,所以添加了“未定义”。 Just add a else statement that returns an empty string.
只需添加一个返回空字符串的 else 语句。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.