简单的 JavaScript 密码检查器在第一次迭代后不会循环答案

【问题标题】：Simple JavaScript password checker won't loop after the first iteration简单的 JavaScript 密码检查器在第一次迭代后不会循环
【发布时间】：2022-11-05 07:42:54
【问题描述】：

至少，我思考迭代在第一个循环之后停止。在发送错误消息之前输入错误密码时，我试图让我的密码循环 3 次。当我输入一个错误的密码并单击我的提交按钮时，迭代停止。编码新手，所以如果我做错了什么，请告诉我。

我的 JS（按钮on-click 功能）：

var password = "password";
var notif = document.getElementById("notif");
var entryCount = 0;
var entryLimit = 3;
var error = false;


function inputPW(){

    for(i = 0; i < 3; i++){
        notif.innerHTML = "";
        if(passwordInp.value === password){
            notif.innerHTML = "You got it!";
            break;
        }
        else if(i < 3){
            notif.innerHTML = "Incorrect password. Please try again.";
        }
        else{
            notif.innerHTML = "Password limits exceeded.";
        }
    }
}

我的 HTML（仅正文）：

<h1>Password Getter</h1>

        <p>Password:</p>
        <input id = "passwordInp" type="text" placeholder="Password" autofocus>
        <button id="enterBtn" type="button" onclick="inputPW()">Submit</button>
        <p id="notif"></p>
        <script src="JSscript.js"></script>

【问题讨论】：

passwordInp.value 是从哪里来的？您将其设为输入的 Id，但未在 JS 中定义。
@Cerceis 具有 id 的文档对象可以直接从 javascript 中的 DOM 访问，而无需 getElementById。（折旧功能）
@mrtechtroid 我明白了，仍然应该避免，因为它被标记为已弃用。

标签： javascript html for-loop passwords

【解决方案1】：

//these constants won't change during execution
const LIMIT = 3;
const PASSWORD = 'password';

let entryCount = 0; // a global variable
let authorized = true; //can we still try?

function handleInput(inp){

    if(!authorized){
        return; //we do nothing if we're not authorized anymore
    }
    const matches = inp == PASSWORD; 
    
    if(matches){
        //do 'success' thing
    } else if(entryCount < LIMIT){
        entryCount++;
        //do 'not success' thing
    } else{
       authorized = false;
       //do 'unauthorized' thing
    }
}

<h1>Password Getter</h1>

<p>Password:</p>
<input id = "passwordInp" type="text" placeholder="Password" autofocus>
<button id="enterBtn" type="button" onclick="handleClick(passwordInp.value)">Submit</button>
<p id="notif"></p>
<script src="JSscript.js"></script>

【讨论】：

我从这段代码中学到了 5 件事。非常感谢！ :)

【解决方案2】：

for 循环一次运行相同的代码，而不是等待用户的输入。由于输入在运行时没有改变，它只运行一次。而是在用户单击提交按钮并增加全局变量时调用该函数。

var password = "password";
var notif = document.getElementById("notif");
var passwordInp = document.getElementById("passwordInp");
var entryCount = 0;
var entryLimit = 3;
var error = false;
var i = 0;

function inputPW(){
        notif.innerHTML = "";
        if(passwordInp.value === password){
            notif.innerHTML = "You got it!";
            break;
        else if(i < 3){
            notif.innerHTML = "Incorrect password. Please try again.";
        }
        else{
            notif.innerHTML = "Password limits exceeded.";
        }
    }
}

【讨论】：

【解决方案3】：

var password = "password";
var notif = document.getElementById("notif");
var passwordInp = document.getElementById("passwordInp");
var entryCount = 0;
var entryLimit = 3;
var error = false;
var i = 0;

function inputPW(){
        notif.innerHTML = "";
        if(passwordInp.value === password){
            notif.innerHTML = "You got it!";

        else if(i < 3){
            notif.innerHTML = "Incorrect password. Please try again.";
        }
        else{
            notif.innerHTML = "Password limits exceeded.";
        }
    }
}

【讨论】：