I am working on a project and I am supposed to use plain ol vanilla javaScript to hide one div and show another with two different link buttons. I have here what should work, but it keeps going in between forms and going back to the login form. What is going wrong? Excuse me for I am a noob at javaScript/coding and I am still learning in school. Thank you for your precious time <3 This will help me immensely as I have been crying for days as I feel like a failure for something so simple sounding.
function switchVisible() {
if (document.getElementById('login1')) {
if (document.getElementById('login1').style.display == 'none') {
document.getElementById('login1').style.display = 'block';
document.getElementById('register1').style.display = 'none';
}
else {
document.getElementById('login1').style.display = 'none';
document.getElementById('register1').style.display = 'block';
}
}
}
function checkField(field) {
if (!field.checkValidity()) {
field.style.backgroundColor = 'pink';
} else {
field.style.backgroundColor = '';
}
}
window.addEventListener('load', function() {
const form = document.getElementById('login-form');
const emailField = form.logfield;
const password = form.pw;
const logLink = document.getElementById('logbtn');
const regLink = document.getElementById('accountbtn');
const form2 = document.getElementById('register-form');
const emailField2 = form2.emailField2;
const password2 = form2.pw2;
const password3 = form2.pw3;
emailField2.addEventListener('input', function() {
checkField(emailField2);
});
password2.addEventListener('input', function() {
checkField(password2);
});
password3.addEventListener('input', function() {
checkField(password3);
});
form2.addEventListener('submit', function(e) {
checkField(emailField2);
checkField(password2);
checkField(password3);
if(!form2.checkValidity(e)) {
e.preventDefault();
alert('Please fix form errors.');
} else {
alert('Form Submitted');
}
});
emailField.addEventListener('input', function(e) {
checkField(emailField);
});
password.addEventListener('input', function(e) {
checkField(password);
});
form.addEventListener('submit', function(e) {
checkField(emailField);
checkField(password);
if(!form.checkValidity(e)) {
e.preventDefault();
alert('Please fix form errors.');
} else {
alert('Form Submitted');
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="../normalize.css" rel="stylesheet">
<link href="../styles.css" rel="stylesheet">
<script src="../play2learn/login.js"></script>
<title>Login</title>
</head>
<body>
<header>
<section>
<h1>Play2Learn Logo</h1>
<nav>
<ul id="nav">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact-us.html">Contact Us</a></li>
<li class="contains"><a>Games</a>
<ul class="menu">
<li><a href="anagram-hunt.html">Anagram Hunt</a></li>
<li><a href="math-facts.html">Math Facts</a></li>
</ul>
</li>
<li><a href="login.html">Login</a></li>
</ul>
</nav>
</section>
</header>
<hr>
<body>
<div id="wrapper">
<section id="login1">
<h2>Login</h2>
<form id="login-form" method="post" novalidate>
<div>
<label for="logfield">Email:</label>
<input type="email" name="logfield" id="logfield" required>
</div>
<div>
<label for="pw">Password:</label>
<input type="password" name="pw" id="pw" size="15" required>
</div>
<div>
<button type="submit" id="login-btn">LOGIN</button>
</div>
<div>
<a href="" id="accountbtn" onclick="switchVisible();">Need an account? Register</a>
</div>
</form>
</section>
<section id="register1">
<h2>Register</h2>
<form id="register-form" method="post" no validate>
<div>
<label for="email-field2">Email:</label>
<input type="email" name="email-field2" id="email-field2" required>
</div>
<div>
<label for="pw2">Password:</label>
<input type="password" name="pw2" id="pw2" size="15" required>
</div>
<div>
<label for="pw3">Repeat Password:</label>
<input type="password" name="pw3" id="pw3" size="15" required>
</div>
<div>
<button type="submit" id="register-btn">REGISTER</button>
</div>
<div>
<a href="" id="logbtn">Have an account? Log in</a>
</div>
</form>
</section>
</div>
</body>
<hr>
<footer>© 2022 Play2Learn</footer>
<address>
<a href="contact-us.html">
<img src="images/email.png" alt="email-icon"></a>
<a href="https://instagram.com">
<img src="images/instagram.png" alt="instagram-icon"></a>
<a href="https://twitter.com">
<img src="images/twitter-icon.png" alt="twitter-icon"></a>
<a href="https://facebook.com">
<img src="images/facebook-icon.png" alt="facebook-icon"></a>
</address>
</body>
</html>
section {
display: flex;
justify-content: space-between;
padding: .5rem .5rem;
}
h1 {
color: #4FBDBA;
margin: .5rem;
padding: .5rem;
display: block;
position: relative;
}
body {
background-color: #35858B;
}
nav {
margin: 0 -0.5rem;
padding: 0.5rem 0.5rem;
display: inline;
background: #4FBDBA;
position: relative;
}
nav li {
display: inline-block;
color:rgb(53, 112, 132);
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav a {
display: block;
padding: .5rem;
text-decoration: none;
}
nav::after {
content: "";
display: block;
clear: both;
}
nav a:hover {
background: rgb(51, 136, 132);
}
nav a:active {
color: teal;
}
li.contains ul {
display: none;
}
li.contains:hover ul {
background: #4FBDBA;
display: block;
position: absolute;
}
li.contains li {
float: none;
font-size: 0.9rem;
}
#clients h2 {
color: rgb(30, 75, 90);
margin: .5rem;
padding: 0.5rem;
}
ul.menu a:hover {
color: rgb(133, 202, 202);
font-weight: bold;
}
a img {
max-width: 32px;
max-height: 32px;
float: right;
}
footer {
padding: .5rem;
margin: 10px auto;
text-align: left;
position: relative;
display: inline;
}
address {
display: inline;
position: relative;
right: 0;
}
address a {
flex-flow: row;
}
hr {
height: 2px;
background-color: #AEFEFF;
border: none;
margin: auto;
}
#anagram {
flex-flow: row;
margin: 1rem;
padding: 2rem;
color: teal;
text-align: center;
}
#math {
flex-flow: row;
margin: 1rem;
padding: 2rem;
color:#35858B;
text-align: center;
}
div#about h2 {
color: white;
text-align: center;
}
p {
color:white;;
text-align: center;
}
label {
display: block;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: bold;
margin: 5px 0px;
color:#072227;
}
input {
width: 97%;
padding: 5px;
margin: 10px auto;
}
textarea {
width: 97%;
padding: 5px;
margin: 10px auto;
}
button#contact-btn,
button#login-btn,
button#register-button {
background-color:rgb(51, 136, 132);
color: white;
font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: x-large;
margin-top: 10px;
padding: 5px;
width: 100%;
}
form {
width: 500px;
margin: 20px auto;
}
#about {
width: 500px;
margin: 20px auto;
}
#login1 {
position: relative;
display: block;
width: 100%;
}
#register1 {
position: relative;
display: none;
width: 100%;
}
h2 {
color: white;
}
section#math-facts {
width: 100%;
display: block;
}
