prompt[
^] is a very limited API which instructs the browser to display a message and ask the user to enter some text. There is no way to "mask" the text that is entered.
Rather than using such a clunky script, use a proper login form - use an
<input>[
^] for both the username and the password, with
type="password"
for the password input.
<form>
<p>
<label for="username">Username:</label>
<input type="text" size="20" name="username" id="username">
</p>
<p>
<label for="password">Password:</label>
<input type="password" size="20" name="password" id="password">
</p>
</form>
<script>
document.querySelector("form").addEventListener("submit", e => {
e.preventDefault();
const username = document.getElementById("username").value.toLowerCase();
const password = document.getElementById("password").value;
if (username === "guest" && password === "login") {
location = "home-page.html";
} else if (username === "guest2" && password === "login2") {
location = "home-page2.html";
} else {
alert("Invalid login!");
}
});
</script>
NB: This is not even remotely secure. The end user can simply view the source of the page to learn the credentials, or even navigate directly to the "protected" pages. If this is meant to be a real application, and not a learning exercise, then you have a lot of work to do.