パスワードを入力して成功したら、指定のページを表示する展開を整理してみました。
<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<title>認証ページ</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="links/rule.css">
</head>
<body>
<div id="authentication">
<h2>パスワードを入力してください</h2>
<input type="password" id="passwordInput">
<button onclick="authenticate()"> 認証 
</button>
</div>
<div id="content" style="display: none;"></div>
<!--
div id="content" 本文のコンテンツ部分を指定
"display: none;" 要素の存在を消す
"visibility: none;" 要素の存在を透明にして消す
-->
</div>
<script src="links/script.js"></script>
</body>
</html>
<!-- index.html -->
/* script.js */
function authenticate() {
const password = "abracadabra"; // 設定したパスワード
const passwordInput =
document.getElementById("passwordInput");
const authenticationDiv =
document.getElementById("authentication");
const contentDiv =
document.getElementById("content");
/*ユーザーが入力したパスワードと
事前に設定したパスワードを比較。*/
if (passwordInput.value === password) {
authenticationDiv.style.display = "none";
window.location.href = "success.html";
// リダイレクト先のURLを設定
} else {
alert("認証に失敗しました。
正しいパスワードを入力してください。");
}
}
/*一致した場合に認証成功なら
authenticationディビジョンを非表示にし、
リダイレクト先のURLを表示。
認証に失敗なら、アラートメッセージを表示。*/
/* script.js */
※ソースを見てもパスワードが分からないようにする方法は研究中
/* rule.css */
@charset "UTF-8";
* {
margin: 0px;
padding: 0px;
}
body {
background-color: lemonchiffon; /* #fffacd */
text-align: center;
}
/* rule.css */
<!-- success.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
<title>認証ページ</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="links/rule2.css">
</head>
<body>
<div id="main_box">
<img src="images/monster.png">
</div>
<h3>認証を確認しました</h3>
</body>
</html>
<!-- success.html -->
/* rule2.css */
@charset "UTF-8";
* {
margin: 0px;
padding: 0px;
}
body {
background-color: deepskyblue; /* #00bfff */
text-align: center;
}
div#main_box {
height: 480px;
width: 640px;
margin: 0px auto;
}
h3 {
color: crimson; /* #dc143c*/
}
/* rule2.css */
という5つのファイルと画像1つを以下の様に配置します。
・index.html（メインのhtml）
・links/scrupt.js（JavaScript）
・links/rule.css（index.htmlに連動するcss）
・links/success.html（切替で表示されるhtml）
・links/rule2.css（success.htmlに連動するcss）
・images/monster.png（success。ｈｔｍｌで表示する画像）
inde.htmlを開き、正しいパスワードを入力すると・・・
指定したページが表示されます。
