I was trying to make a multi page form under that for there was a span which said if already user then sign up it was supposed to show other section of form where the user can sign up but instead it keep showing
login.html:1 Uncaught ReferenceError: showLogin is not defined at HTMLButtonElement.onclick (login.html:1:1)
Here's the login.html file and below this is JavaScript file which I was working on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login to Artify</title>
<link rel="stylesheet" href="../src/stylesheets/style.css" />
<link rel="stylesheet" href="../src/stylesheets/login.css" />
</head>
<body>
<div class="container">
<nav class="main-nav">
<header class="main-header">
<a href="/index.html" class="heading">Artify</a>
</header>
</nav>
<main class="form-container">
<h1 id="form-header"></h1>
<form class="login-form">
<div class="field">
<label for="username">Username:</label>
<input type="text" placeholder="Eg. JohnDoe" />
</div>
<button class="submit" id="loginBtn">Log In</button>
</form>
<form class="Signup-form" id="first-page">
<div class="field">
<label for="firstName">Enter First Name: </label>
<input type="text" placeholder="Eg. John" />
</div>
<div class="field">
<label for="lastName">Enter Last Name: </label>
<input type="text" placeholder="Eg. Doe" />
</div>
<button class="submit" id="next">Next</button>
</form>
<form class="Signup-form" id="second-page">
<div class="field">
<label for="username">Enter a Username</label>
<input type="text" placeholder="Eg. JohnDoe" />
</div>
<button class="submit" id="signup">Sign up</button>
</form>
<span class="footnote"></span>
</main>
</div>
<script type="module" src="../src/scripts/login.js"></script>
</body>
</html>
JS file
const header = document.querySelector("#form-header");
const footnote = document.querySelector(".footnote");
const loginForm = document.querySelector(".login-form");
const firstPage = document.querySelector("#first-page");
const secondPage = document.querySelector("#second-page");
function showFirstPage() {
loginForm.style.display = "none";
header.innerText = "Create Account";
footnote.innerHTML = `Already a user? <button id="change-form" onclick="showLogin">Log In</button>`;
firstPage.style.display = "block";
secondPage.style.display = "none";
}
function showLogin() {
header.innerText = "Welcome Back!";
footnote.innerHTML = `Don't have Account? <button id="change-form" onclick="showFirstPage()">Create now</button>`;
loginForm.style.display = "block";
firstPage.style.display = "none";
secondPage.style.display = "none";
}
window.addEventListener("load", showFirstPage);
I got stuck at a point where I can't find any already published online reference