onclickが条件を満たすかどうかを確認するsetTimeoutでリダイレクト

Question

ログインの詳細が特定のユーザー名とパスワードを満たしてから3秒後に別のページにリダイレクトするという簡単なログインの例を作成しようとしています。

これは私がこれまで試みられてきたもので、任意のヘルプは

<input type="text" id="username" placeholder="Username" name="uname" maxlength="15" required> 

    <input type="password" id="password" placeholder="Password" name="psw" maxlength="25" required> 

<div id="loginButton"> 
    <button type="button" input id="detailsChecker" onclick="showalert('alert');" label=>Login </button> 
</div> 

<div id="alert" style="display:none;"> 
    <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> 
    <p id="alertmsg"> </p> 
</div> 

<div id="alertsuccess" style="display:none;"> 
    <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> 
    <p id="alertmsg"> </p> 




function showalert(id) { 
    var divelement = document.getElementById(id); 
    var username = document.getElementById("username").value; 
    var password = document.getElementById("password").value; 
if (username === "u1460714" && password ==="barney") { 
     document.getElementById("alertmsg").innerHTML = "Successfully logged in, redirecting in 3 seconds"; 
     setTimeout, window.location = "attendance.html"; 3000; 
     divelement.style.display = 'block'; 
     divelement.className = 'success' 

    } 
} 

Answer 1

を高く評価しているあなたは不適切setTimeout()関数を呼び出しています。コード全体を保持するコールバック関数を引数として受け取ります。これは遅延させる必要があります。

function showalert(id) { 
 
    var divelement = document.getElementById(id); 
 
    var username = document.getElementById("username").value; 
 
    var password = document.getElementById("password").value; 
 
    if (username === "u1460714" && password === "barney") { 
 
    document.getElementById("alertmsg").innerHTML = "Successfully logged in, redirecting in 3 seconds"; 
 
    setTimeout(function() { 
 
     window.location = "attendance.html"; 
 
    }, 3000); 
 
    divelement.style.display = 'block'; 
 
    divelement.className = 'success' 
 
    } 
 
}

<input type="text" id="username" placeholder="Username" name="uname" maxlength="15" required> 
 

 
<input type="password" id="password" placeholder="Password" name="psw" maxlength="25" required> 
 

 
<div id="loginButton"> 
 
    <button type="button" input id="detailsChecker" onclick="showalert('alert');" label=>Login </button> 
 
</div> 
 

 
<div id="alert" style="display:none;"> 
 
    <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> 
 
    <p id="alertmsg"> </p> 
 
</div> 
 

 
<div id="alertsuccess" style="display:none;"> 
 
    <span class="closebtn" onclick="this.parentElement.style.display='none';">&times;</span> 
 
    <p id="alertmsg"> </p>