在 javascript 中获取随机密码

Question

我正在开设一门课程，其中一项任务是生成四个不同的密码，这些密码应填充四个不同的段落 ，  ，  , 

我创建了一个创建密码的脚本，但不知何故它不打印第一个密码。 当我执行console.log(password)时，它显示在控制台上创建了一个密码。 但是当我尝试输入first.textContent = password时，它什么也没显示。

 let chars = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "A", "B", "C", "D"] let number = 10 let password = "" let first = document.getElementById("first") let second = document.getElementById("second") let third = document.getElementById("third") let fourth = document.getElementById("fourth") function generate() { for (let i = 0; i < number; i++) { let passwordChar = Math.floor(Math.random() * chars.length) password += chars[passwordChar] return password } } first.textContent = password

 <html> <head> <link rel="stylesheet" href="index.css"> </head> <body> <h1>Generate a random password</h1> <p id="description">Never use an insecure password again</p> <button onclick="generate()">Generate passwords</button> <p id="line"></p> <p id="first"></p> <p id="second"></p> <p id="third"></p> <p id="fourth"></p> </body> </html>

每次 function 运行新密码时，我也坚持生成新密码并将其放在下一段中。 像这样：

first.textContent = password
second.textContent = password
third.textContent = password
fourth.textContent = password

任何帮助将不胜感激

Answer 1

请注意您编写的每一行代码。 每一行都有意义！

您不需要跟踪外部 scope 变量中的“密码”。 您只需要一个局部变量（还要注意return部分应该在for循环之后：

function generate() {
    let pw = ''
    for (let i = 0; i < number; i++) {
        let passwordChar = Math.floor(Math.random() * chars.length)
        pw += chars[passwordChar]
    }    
    return pw
}

您没有调用generate() ：

first.textContent = generate()
second.textContent = generate()
third.textContent = generate()
fourth.textContent = generate()

Answer 2

使用内联事件处理程序通常不是一个好主意。

这是使用事件委托的片段。 为了检索和填充某些元素，请为它们使用单个标识符（此处：数据属性）。 现在您可以循环元素并用您的密码值 ( forEach ) 填充它们。 在此代码段中，密码是使用Array.map生成的。

也可以看看...

 document.addEventListener(`click`, handle); function handle(evt) { // ↓ only do things if button#passGen is clicked if (evt.target.id === `passGen`) { return generate(); } } function generate() { const chars = `0123456789abcdefghijk`; document.querySelectorAll(`[data-passgenerated]`) // ↑ retrieve all p[data-passgenerated] // ↓ Loop through the elements and fill them.forEach(elem => elem.textContent = [...Array(10)].map(v => chars[Math.floor(Math.random() * chars.length)]).join(``) ); }

 <p data-passgenerated="1"></p> <p data-passgenerated="2"></p> <p data-passgenerated="3"></p> <p data-passgenerated="4"></p> <button id="passGen">Create passwords</button>

Answer 3

主要的错误是first.textContent = password被放置在generate()之外，因此它将被设置为初始password值（空字符串），但永远不会更新。

在不做太多改动的情况下，我建议将代码拆分为两个函数。 一种用于生成密码，另一种用于将元素内容分配给这些随机生成的密码。

 function generatePassword() { const chars = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "A", "B", "C", "D"]; let password = ""; for (let i = 0; i < 10; i++) { const passwordChar = Math.floor(Math.random() * chars.length); password += chars[passwordChar]; } // I've moved the return down, because you return after generating only 1 character return password; } function loadPasswords() { document.getElementById("first").textContent = generatePassword(); document.getElementById("second").textContent = generatePassword(); document.getElementById("third").textContent = generatePassword(); document.getElementById("fourth").textContent = generatePassword(); }

 <h1>Generate a random password</h1> <p id="description">Never use an insecure password again</p> <button onclick="loadPasswords()">Generate passwords</button> <p id="line"></p> <p id="first"></p> <p id="second"></p> <p id="third"></p> <p id="fourth"></p>

就像其他答案已经说明的那样，我个人会避免使用内联处理程序并改用addEventListener() 。

在 javascript 中获取随机密码

问题描述

3 个解决方案

解决方案1
0 2022-02-10 10:39:26

解决方案2
0 2022-02-10 10:51:46

解决方案3
0 已采纳 2022-02-10 11:22:03

在 javascript 中获取随机密码

问题描述

3 个解决方案

解决方案1 0 2022-02-10 10:39:26

解决方案2 0 2022-02-10 10:51:46

解决方案3 0 已采纳 2022-02-10 11:22:03

解决方案1
0 2022-02-10 10:39:26

解决方案2
0 2022-02-10 10:51:46

解决方案3
0 已采纳 2022-02-10 11:22:03