CODEWITHSUNDEEP
javascripthtml
Sanavi
Sanavi

Reputation: 27

Multiple addEventListeners in js file, only one works

So I'm playing around with HTML and JS, and I have two web pages, each with their own addEventListener I need to work when a user submits a form from those pages. However, only the eventlistener for my Log In page is working - the one for my Reset Password page doesn't. I've tried swapping their order in the JS file, and then my Reset Password one works, and my Log In doesn't. Is it possible to have many addEventListeners in one JS file all work appropriately when needed?

Below is the code:

Log In In Page HTML:

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Log In</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
</head>
<body id="formBodyBG">
<header>    
    <div>
        <div id="navMenu">
          <ul>
            <li class="logo">
                <a href="index.html" class="navLink home">Home</a>
            </li>
            <li class="createAccount">
              <a href="createAccount.html" class="navLink createAccountButton">Create Account</a>
            </li>
          </ul>
        </div>
      </div>
</header>
<section class="mainBody">
    <div class="leftSide"></div>
    <div class="mainForm">
            <h1 style="text-align:center; margin-bottom:12px; font-size:32px">Welcome Back!</h1>
            <h5 style="text-align:center; margin-bottom:25px">Log in to review, analyze past trends, or import new data.</h5>
            <form class="form" id="loginForm" action="dashboard.html" method="GET">
                <div class="mainFormDesign">
                    <label>Username</label>
                    <input type="text" id="username" name="username" class="input"><br>
                    <i class="fa fa-check-circle"></i>
                    <i class="fa fa-exclamation-circle"></i>
                    <small>Error message</small><br><br>
                </div>
                <div class="mainFormDesign">
                    <div style="width: 50%; float:left">
                        <label>Password</label>
                    </div>
                    <div style="width: 50%; float:right">
                        <label><a href="resetPassword.html" class="label">Forgot Password?</a></label>
                    </div>
                    <input id="password" type="password" name="password" class="input"><br>
                    <i class="fa fa-check-circle"></i>
                    <i class="fa fa-exclamation-circle"></i>
                    <small>Error message</small><br><br>
                </div>
                <button class="loginButton" id="loginSubmit">Log In</button>
                <br><br><hr>
                <h5 style="text-align:center; margin-bottom:35px;" class="secondCreateAccountLink">New to StigTracker? <a href="createAccount.html" class="accountLink">Create an account.</a></h5>
            </form>
    </div>
    <div class="rightSide"></div>
</section>
<script type="text/javascript" src="/pages/code.js"></script>

Reset Password Page HTML:

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Reset Password</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body id="formBodyBG">
<header>    
    <div>
        <div id="navMenu">
          <ul>
            <li class="logo">
                <a href="index.html" class="navLink home">Home</a>
            </li>
            <li class="createAccount">
              <a href="createAccount.html" class="navLink createAccountButton">Create Account</a>
            </li>
          </ul>
        </div>
      </div>
</header>
<section class="mainBody">
    <div class="leftSide"></div>
    <div class="mainForm">
        <h1 style="text-align:center; margin-bottom:12px; font-size:32px">Reset Your Password</h1>
        <h5 style="text-align:center; margin-bottom:25px">Enter a valid email to receive instructions on how to reset your password.</h5>
        <form class="form" id="resetForm" action="resetSuccess.html" method="GET">
            <div class="mainFormDesign">
                <label>Email</label>
                <input type="email" id="email" name="email" class="input"><br>
                <i class="fa fa-check-circle"></i>
                <i class="fa fa-exclamation-circle"></i>
                <small>Error message</small><br><br>
            </div>
            <button class="loginButton" id="resetSubmit">Reset Password</button>
        </form>
    </div>
    <div class="rightSide"></div>
</section>
<script type="text/javascript" src="/pages/code.js"></script>

JS:

const username = document.getElementById('username')
const password = document.getElementById('password')
const email = document.getElementById('email')
const loginForm = document.getElementById('loginForm')
const resetForm = document.getElementById('resetForm')

loginForm.addEventListener('submit', (e) => {
    e.preventDefault()
    if (username.value === '' || username.value == null) {
        setErrorFor(username,'Username cannot be blank.')
    }
    else if (username.value !== 'testuser') {
        setErrorFor(username,'Username is not valid.')
    }
    else {
        setSuccessFor(username)
    }

    if (password.value === '' || password.value == null) {
        setErrorFor(password,'Password cannot be blank.')
    }
    else if (password.value !== '123456') {
        setErrorFor(password,'Password is not valid.')
    }
    else {
        setSuccessFor(password)
    }

    if (username.value === 'testuser' & password.value === '123456') {
        window.location.href = "index.html";
    }
})

resetForm.addEventListener('submit', (e) => {
    e.preventDefault()
    if (email.value === '' || email.value == null) {
        setErrorFor(email,'Email cannot be blank.')
    }
    else if (email.value !== '[email protected]') {
        setErrorFor(email,'Email is not valid.')
    }
    else {
        setSuccessFor(email)
    }

    if(!isEmail(email.value)) {
        setErrorFor(email,'Email is not valid.')
    }
    else {
        window.location.href = "index.html"; 
    }
})

function setErrorFor(input, message) {
    const mainFormDesign = input.parentElement;
    const small = mainFormDesign.querySelector('small');

    small.innerText = message;

    mainFormDesign.className = 'mainFormDesign error';
}

function setSuccessFor(input) {
    const mainFormDesign = input.parentElement;

    mainFormDesign.className = 'mainFormDesign success';
}

Upvotes: 0

Views: 52

Answers (1)

Rmaxx
Rmaxx

Reputation: 1187

You will have an error on the resetform page since loginform doesn't exist, this stops the javascript from completing, the other way around it will probably throw an error, but work for the login part.. check the console indeed.. open the html in browser and press F12

Solution: only add the eventlistener is the element !== null

if ((typeof loginForm === 'undefined') || (loginForm !== null)){
   loginForm.addEventListener......
}

Upvotes: 1

Related Questions