Простая проверка паролей JavaScript не будет зацикливаться после первой итерации

По крайней мере, я считать, что итерации останавливаются после первого цикла. Я пытаюсь заставить мой пароль зацикливаться 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? Вы делаете его идентификатором для ввода, но он не определен в JS.

— 17.05.2022 02:07

К объектам документа @Cerceis, имеющим идентификатор, можно получить прямой доступ из DOM в javascript без getElementById. (устаревшая функция)

— 17.05.2022 02:10

@mrtechtroid Я вижу, его все же следует избегать, поскольку он помечен как устаревший.

— 17.05.2022 02:13

html passwords javascript for-loop

17.05.2022 02:04

Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)

Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...

Введение в технологический стек Twitch

В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:

8 полезных HTML-тегов, которые лучше использовать вместо <div>

Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...

HTML5: API локального хранилища (Local Storage)

LocalStorage - это простой способ хранения данных в браузере пользователя.

Доступность HTML - программирование с инклюзивной перспективой

Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...

Именование классов CSS: Конвенция именования BEM

Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 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.";
        }
    }
}

17.05.2022 02:09

Ответ принят как подходящий

//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 вещах из этого блока кода. Огромное спасибо! :)

— 17.05.2022 03:20

17.05.2022 02:45