The alert for wrong password keeps displaying, even after I click ok using Javascript. How do I stop this continuous display of the alert message

Question

I've been trying to validate a password text in a Modal window. When I enter the the incorrect password the alert keeps on displaying "Login is incorrect" message. Seems the while loop I am using, keeps continuing. How do I make the alert message display only once. But the Modal window should keep displaying

 var modal = document.getElementById('loginModal'); // Get the button that opens the modal var btn = document.getElementById("loginBtn"); // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks the button, open the modal btn.onclick = function() { modal.style.display = "block"; } // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } function promptPassword( ) { while (document.getElementById("pwdText").value != 'P@ssw0rd'){ alert("Login is incorrect"); document.getElementById('pwdText').value = ""; } alert("Password is correct, you are allowed to enter the site"); } 

 .modal { display: none; /* Modal not shown by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the modal box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ } /* Modal Content */ .modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 25%; height: 25%; } /*Display of text box labels*/ label{ display: inline-block; float: left; clear: left; width: 250px; text-align: left; } label { display: inline-block; float: left; } /*Display of text and password boxes*/ input[type=text] { width:250px; } input[type=password] { width:250px; } /* Close Button */ .close { float: right; margin: -15px -15px 0 0; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { text-decoration: none; cursor: pointer; } 

 <!-- Login button to pen Modal box --> <button id="loginBtn">Login</button> <!-- The Modal box--> <div id="loginModal" class="modal"> <!-- Modal content --> <div class="modal-content"> <span class="close">×</span> <form> <br/> <label>User Name</label><input id="userName" type="text"><br /> <br/> <label>Password</label><input id="pwdText" type="password"><br /> <br/> <button onclick="promptPassword()">Submit</button> </form> </div> 

I need to do this without using Jquery

Answer 1

function promptPassword( )
{

if (document.getElementById("pwdText").value != 'P@ssw0rd'){
alert("Login is incorrect");
document.getElementById('pwdText').value = "";

}

Use if instead of while

Answer 2

First you need to replace

<button onclick="promptPassword()">Submit</button>

to

<button onclick="return promptPassword()">Submit</button>

Then you need to use only this

function promptPassword( )
{
    var pwd = document.getElementById("pwdText").value;
    if(pwd != 'P@ssw0rd'){
        alert("Login is incorrect");
        document.getElementById('pwdText').value = "";
        return false;
    }
    else{
        alert("Password is correct, you are allowed to enter the site");    
        // Enter Site Code Here
    }
}

Answer 3

You're using a while loop, which will keep repeating until the condition is no longer met.

What you need is an if statement.

function promptPassword( ) { 
    if(document.getElementById("pwdText").value != 'P@ssw0rd'){ 
        alert("Login is incorrect");
        document.getElementById('pwdText').value = "";
    }
}

Answer 4

function promptPassword( ) { 
    if(document.getElementById("pwdText").value != 'P@ssw0rd'){ 
        alert("Login is incorrect");
        document.getElementById('pwdText').value = "";
        return false;
    }
}