javascript - 即使在我使用 Javascript 单击“确定”之后，错误密码的警报仍会继续显示。如何停止持续显示警报消息

Question

我一直在尝试验证模态窗口中的密码文本。当我输入不正确的密码时，警报会继续显示“登录不正确”消息。似乎我正在使用的 while 循环一直在继续。如何使警报消息只显示一次。但是模态窗口应该继续显示

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>

我需要在不使用 Jquery 的情况下执行此操作

Answer 1

function promptPassword( )
{

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

}

用if代替while