Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Uncaught TypeError: Cannot read properties of null

Venulaur0408

New Coder
Hi. I am working on a project that has multiple pages. The two pages that i have posted below are the home and contact page. In my console on the contact page i have no errors but when I navigate to my home page I get an error that reads Uncaught TypeError: Cannot read properties of null (reading 'addEventListener'). My script tags are at the bottom and I tried adding a onload to the body and wrapping my code in a function in JavaScript with an event listener of DOMContentLoaded.The line that the error references in my javascript file is regarding my event listener on a form .How can i fix this error?


HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SwimFront | Home</title>
    <link rel="shortcut icon" href="img/swimming-icon.svg" type="image/x-icon">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="self-host/all.css">
    <link rel="stylesheet" href="css/all.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body onload="loadHome()">
    <!-- Top Section Of Home Page-->
    <aside class="sidebar">
        <div class="sidebar-header ">
            <h2 class="">Swim Front</h2>
            <button id="close-toggle-btn">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <ul id="sidebar-links" class="mt-4 pt-4">
            <li><a href="index.html" class=" nav-link pt-2 hover-1"><i class="fa-solid fa-house"></i> Home</a></li>
            <li><a href="appointment.html" class="nav-link pt-2 hover-1"> <i class="fa-solid fa-clock"></i> Appointments</a></li>
            <li><a href="contact.html" class="nav-link pt-2 hover-1"><i class="fa-solid fa-envelope"></i> Contact</a></li>
            <li><a href="login.html" class="nav-link pt-2 hover-1 "><i class="fa-solid fa-water-ladder"></i> Login</a></li>
            <li><a href="" id="" class="social-icon nav-link hover-2"><i class="fa-brands fa-instagram "></i></a></li>
            <li><a href="" id="" class="social-icon nav-link hover-1"><i class="fa-brands fa-facebook "></i></a> </li>
            
            
            <nav class="d-flex flex-column ">
                <li class=""><a href="" id="" class="hover-1">Swim Tips</a></li>
                <li class=""><a href="" id="" class="hover-1"> FAQ</a></li>
                <li class=""><a href="" id="" class="hover-1">Swim Class Info</a></li>
            </nav>
        </ul>
        
    </aside>
    <header id="header-nav" class=" navbar d-flex align-items-center" >
        <div class="container-fluid">
            <h1 id="branding" class="me-auto">Swim <span class="brand-highlight">Front <i class="fa-solid fa-water"></i></span></h1>
            <button id="sidebar-toggle-btn" class="btn" type="button">
                <span class="navbar-toggler-icon "></span>
            </button>
            
            <!-- <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav d-flex align-items-center ms-auto ">
                    <a href="index.html" class=" nav-link pt-2 px-lg-3"><i class="fa-solid fa-house"></i> Home</a>
                    <a href="appointment.html" class="nav-link pt-2  px-lg-3"><i class="fa-solid fa-clock"></i>  Appointments</a>
                    <a href="contact.html" class="nav-link pt-2  px-lg-3"><i class="fa-solid fa-envelope"></i> Contact</a>
                    <a href="login.html" class="nav-link pt-2  px-lg-3"><i class="fa-solid fa-water-ladder"></i> Login</a>
                </ul>
            </div> -->
              
            
        </div>
    </header>
    <div id="home-top">

        <!-- Header Navigation-->
      
        <!-- End Of Header Navigation-->

        <!-- Home Showcase Area -->
        <main id="showcase" class="">
            <div id="inner-showcase" class="container-fluid d-flex flex-column text-center pt-4">
                <h1 id="showcase-heading" class="py-3 text-dark fw-bold ">Dive In For A Swim</h1>
                <p id="showcase-paragraph fw-light"> Water can be a very frightening terriority to explore for some newcomers, Thats why SwimFront Instructor Francine provides a transparent background on herself showing her knowledge, comfrtablity, and overall qualifications to teach swimming. Francine confidelty believes anyone can swim. Click the button below and find out more.</p>
                <button class=" w-50 align-self-center mt-4 mb-1 p-2 rounded" id="about-btn"> <a href="about.html" class="about-link text-dark fw-light">Get Started</a></button>
                <img src="img/swimmer.gif" id="showcase-img" alt="" srcset="" class="img-fluid "  height="">
            </div>
        </main>
        <!--End Of Home Showcase Area-->
    </div>
    <!-- End Of Top Section Of Home Page-->

    <!-- Bottom Of Home Page-->
    <div id="bottom">

        <div class="container-xl">
            <div class="row d-flex align-items-center">
                <div id="about-us-showcase" class="col-row col-lg-7 ">
                    <div id="about-us-inner-showcase" class="d-flex flex-column px-4">
                        <h2 id="about-us-showcase-header" class="w-50 ms-auto me-auto text-center fw-light">About Us</h2>
                        <h5 id="slide-title" class="fw-light text-center text-dark pt-4">Welcome</h5>
                        <p class="text-center fw-light">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis asperiores vel at explicabo magnam sunt distinctio facere rerum quo dolor voluptatem suscipit, impedit fugiat eveniet recusandae molestiae? Esse totam nam voluptatem, excepturi quasi eaque dolorum ratione natus tenetur! Maiores quibusdam vitae reprehenderit repudiandae perferendis quod obcaecati commodi fugiat ipsum reiciendis.</p>
                        <div id="about-us-article-btns" class="d-flex justify-content-center">
                            <button id="prev-about-us-article" class="about-us-article-btn me-2 p-2 rounded">Previous</button>
                            <button id="next-about-us-article" class="about-us-article-btn ms-2 p-2 rounded">Next</button>
                        </div>
                    </div>
                </div>
                <div id="about-photos" class="col-row col-lg-5">
                    <div class="container-fluid">
                        <div id="photos" class="row">
                            <div class="col about-us-photo d-flex justify-self-center">
                                <div class="img-fluid">
                                    <img src="img/francine-coaching-1.jfif" alt="" srcset="">
                                </div>
                            </div>
                            <div class="col about-us-photo">
                                <div class="img-fluid pb-2">
                                    <img src="img/francine-img-1.jfif" alt="" srcset="">
                                </div>
                            </div>
                            <div class="col about-us-photo d-flex">
                                <div class="img-fluid">
                                    <img class="ms-auto " src="img/swim-team-img-1.jpg" alt="" srcset="">

                                </div>
                            </div>
                            <div class="w-100"></div>
                            <div class="col about-us-photo">
                                <div class="img-fluid">
                                    <img src="img/swim-meet-1.jpg" alt="" srcset="">
                                </div>
                            </div>
                            <div class="col about-us-photo">
                                <div class="img-fluid">
                                    <img src="img/download.png" alt="">
                                </div>
                            </div>
                            <div class="col about-us-photo">
                                <div class="img-fluid">
                                    <img src="img/francine-coaching-1.jfif" alt="" srcset="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- End Of Bottom-->

    <!-- Footer-->
    <footer id="footer" class="bg-info">

        <div class="container">
            <div id="footer-branding" class="">
                <p class="text-center pt-4 fw-bold text-light">SwimFront , 2023 &#169 </p>
                <p id="manic-branding" class="text-center pt-3 fw-bold">Created By <span class="branding-arrow lesser-branding-arrow"><</span> <span class="cm-green cm-code-branding">Code</span><span class="cm-error">Manic</span> <i class="fa-solid fa-masks-theater "></i> <span class="branding-arrow greater-branding-arrow">></span> Website Services</p>
            </div>
            <div id="footer-links">
                
                <div id="footer-social-media" class="text-light d-flex justify-content-center pt-2">
                    <div class="d-flex flex-column fw-bold px-4 pt-2">
                        <p class="pay-paragraph">Payments Accepted</p>
                    </div>
                </div>
                <div id="payments-accepted" class="d-flex justify-content-center align-items-center ">
                        <i class="fa-brands fa-apple-pay"></i>
                        <p class="mx-4">Cash Payments</p>
                        <p>Cash App</p>
                </div>
            </div>
        </div>

    </footer>
    <!-- Footer -->

    <script  src="js/app.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

</body>
</html>
HTML:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>SwimFront | Contact Us</title>
        <link rel="shortcut icon" href="img/swimming-icon.svg" type="image/x-icon">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="self-host/all.css">
        <link rel="stylesheet" href="css/all.css">
        <link rel="stylesheet" href="css/bootstrap.min.css">
    </head>
    <body onload="loadContact()">
        <aside class="sidebar">
            <div class="sidebar-header bg-info">
                <h2 class="">Swim Front</h2>
                <button id="close-toggle-btn">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <ul id="sidebar-links" class="mt-4 pt-4">
                <li><a href="index.html" class=" nav-link pt-2 hover-1"><i class="fa-solid fa-house"></i> Home</a></li>
                <li><a href="appointment.html" class="nav-link pt-2 hover-1"> <i class="fa-solid fa-clock"></i> Appointments</a></li>
                <li><a href="contact.html" class="nav-link pt-2 hover-1"><i class="fa-solid fa-envelope"></i> Contact</a></li>
                <li><a href="login.html" class="nav-link pt-2 hover-1 "><i class="fa-solid fa-water-ladder"></i> Login</a></li>
                <li><a href="" id="" class="social-icon nav-link hover-2"><i class="fa-brands fa-instagram "></i></a></li>
                <li><a href="" id="" class="social-icon nav-link hover-1"><i class="fa-brands fa-facebook "></i></a> </li>
                
                
                <nav class="d-flex flex-column ">
                    <li class=""><a href="" id="" class="hover-1">Swim Tips</a></li>
                    <li class=""><a href="" id="" class="hover-1"> FAQ</a></li>
                    <li class=""><a href="" id="" class="hover-1">Swim Class Info</a></li>
                </nav>
            </ul>
            
        </aside>
        <header id="header-nav" class=" navbar d-flex align-items-center" >
            <div class="container-fluid">
                <h1 id="branding" class="me-auto pt-1">Swim <span class="brand-highlight">Front <i class="fa-solid fa-water"></i></span></h1>
                <button id="sidebar-toggle-btn" class="btn" type="button">
                    <span class="navbar-toggler-icon "></span>
                </button>
            </div>
        </header>

        <!-- Contact Showcase Area -->
        <main id="contact-showcase">
            <div class="container">
                <div id="inner-contact-showcase" class="d-flex my-4">
                    <div id="contact-showcase-card" class="ms-auto me-auto my-2 d-flex flex-column">
                        <div id="contact-showcase-card-heading" class="d-flex justify-content-center">
                            <h1 id="contact-showcase-card-header" class="fw-light text-info">Contact Us</h1>
                        </div>
                        <div class="empty">

                        </div>
                        <form action="" id="contact-form" class="form-group flex-column">
                            <div id="name-area" class="mt-2">
                                <div class="d-flex  w-75 ms-auto me-auto ">
                                    <div class="w-50 me-4 ">
                                        <label for="firstName"> First Name <span class="last-name-span"></span> </label>
                                        <input type="text" id="first-name" name="firstName" class="form-control me-4">
                                    </div>
                                    <div class="w-50 me-4">
                                        <label for="lastName" id="lastN" class=""> Last Name <span class="last-name-span"></span></label>
                                        <input type="text" id="last-name" name="firstName" class="form-control me-4 ">
                                    </div>
                                </div>
                            </div>
                            <div id="email-number-area" class="mt-2">
                                <div class="d-flex w-75 ms-auto me-auto">
                                    <div class="w-50 me-4">
                                        <label for="phoneNumber"> Phone Number</label>
                                        <input type="text" id="phone-number" name="phoneNumber" class="form-control me-4">
                                   </div>
                                    <div class="w-50 me-4">
                                        <label for="email"> Email</label>
                                        <input type="text" id="email" name="email" class="form-control me-4 ">
                                    </div>
                                </div>
                            </div>
                            <div id="preffered-contact-area" class="mt-2">
                                <div class="w-75 ms-auto me-auto">
                                    <div id="preffered-contact-inner" class="d-flex  justify-content-md-around">
                                        <p class="me-3">Preffered Contact</p>
                                        <div class="d-flex ms-sm-2 ms-md-none">
                                            <div class="form-check">
                                                <input type="radio" class=" mx-1  form-check-input" id="radio1" name="optradio" value="option1" checked> Phone
                                                <label class="form-check-label" for="radio1"></label>
                                            </div>
                                            <div class="form-check mx-2">
                                                <input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">Email
                                                <label class="form-check-label" for="radio2"></label>
                                            </div>
                                            <div id="contact-border"></div>
                                        </div>
                                    </div>   
                                </div>
                            </div>
                            <div id="issue-selector-area" class="mt-2">
                                <div class="w-50 ms-auto me-auto">
                                    <select class="form-select text-center" aria-label="Default select example">
                                        <option selected>Select Email Topic</option>
                                        <option value="1">Website Issue</option>
                                        <option value="2">General Question</option>
                                        <option value="3">Other</option>
                                      </select>
                                </div>
                            </div>
                            <div id="text-input-area" class="m-3 d-flex justify-content-center">
                                <div class="w-75 d-flex justify-content-center">
                                    <textarea name="" id="contact-text-area" ></textarea>
                                </div>
                            </div>
                            <div id="send-email-area" class="my-2 pb-2">
                                <div class="w-75 d-flex justify-content-center ms-auto me-auto">
                                    <button id="contact-btn" type="submit" class="rounded bg-info">Send</button>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </main>

        <!-- End Of Contact Showcase Area-->
        
        
         <!-- Footer-->
    <footer id="footer" class="bg-info">

        <div class="container">
            <div id="footer-branding" class="">
                <p class="text-center pt-4 fw-bold text-light">SwimFront , 2023 &#169 </p>
                <p id="manic-branding" class="text-center pt-3 fw-bold">Created By <span class="branding-arrow lesser-branding-arrow"><</span> <span class="cm-green cm-code-branding">Code</span><span class="cm-error">Manic</span> <i class="fa-solid fa-masks-theater "></i> <span class="branding-arrow greater-branding-arrow">></span> Website Services</p>
            </div>
            <div id="footer-links">
                <nav class="d-flex justify-content-center pt-3">
                    <li class="text-light"><a href="" id="" class="text-light">Swim Tips</a></li>
                    <li class="mx-4 text-light"><a href="" id="" class="text-light"> FAQ</a></li>
                    <li class="text-light"><a href="" id="" class="text-light">Swim Class Info</a></li>
                </nav>
                <div id="footer-social-media" class="text-light d-flex justify-content-between pt-4">
                    <a href="" id="" class="social-icon"><i class="fa-brands fa-facebook text-light"></i></a>
                    <div class="d-flex flex-column fw-bold px-4 pt-2">
                        <p class="pay-paragraph">Payments Accepted</p>
[CODE=javascript] const toggleBtn = document.getElementById('sidebar-toggle-btn');
        const sidebar = document.querySelector('.sidebar');
        const closeBtn = document.querySelector('#close-toggle-btn');
        console.log(toggleBtn,sidebar)

        toggleBtn.addEventListener('click', function(){
          
           sidebar.classList.toggle('show-sidebar')
        })

        closeBtn.addEventListener('click', function(){
            sidebar.classList.remove('show-sidebar')
        })
    

window.addEventListener('DOMContentLoaded', function(e){
    
    console.log(e.currentTarget)
})

const contactForm = document.querySelector('#contact-form')
const contactFirstName = document.querySelector('#first-name')
const contactLastName = document.querySelector('#last-name')


function loadContact(){
  
    window.addEventListener('DOMContentLoaded',function(){
        
        const form = document.querySelector('#contact-form');
        console.log(form)
        const firstName = this.document.querySelector('#first-name')
        const lastName = this.document.querySelector('#last-name')
        const empty = this.document.querySelector('.empty')
        console.log(firstName,lastName,empty)
        form.addEventListener('submit',function(e){
            e.preventDefault()
            console.log('submit')
            firstName.addEventListener('input', words)
            lastName.addEventListener('input', words)
            firstName.removeEventListener('input',words)
            lastName.removeEventListener('input',words)
            words()
            firstName.value = ""
            lastName.value = ""
        })
        

        function words(first, last){
            
            first = firstName.value;
            last = lastName.value;
            
            console.log(first, last)

            if(first.length === 0 && last.length === 0){
                empty.textContent = " Mutiple Fields Missing"
                empty.classList.add('text-error')
                console.log(empty.innerHTML)
                const span = document.querySelectorAll('.last-name-span')
                span.forEach(span => {
                    console.log(span)
                    const element = document.createElement('i')
                    element.classList.add('fa-solid', 'fa-circle-xmark')
                    element.style.color = "#ed4337"
                    span.appendChild(element)
                    let childNodes = span.childNodes.length;
                    console.log(childNodes)
                    if(childNodes >= 2){
                        span.removeChild(element)
                    }
                })
                
                
                
            }   


            


        }

      

    })
    

}
loadContact()




    












loadHome()
function loadHome(){
    window.addEventListener('DOMContentLoaded',function(e){
        console.log('loaded home')
        
    })
    
}

loadLogin()
function loadLogin(){
    window.addEventListener('DOMContentLoaded',function(e){
        console.log('loaded login')
        
    })
    
}
</div>
<a href="" id="" class="social-icon"><i class="fa-brands fa-instagram text-light"></i></a>
</div>
<div id="payments-accepted" class="d-flex justify-content-center align-items-center ">
<i class="fa-brands fa-apple-pay"></i>
<p class="mx-4">Cash Payments</p>
<p>Cash App</p>
</div>
</div>
</div>

</footer>
<!-- Footer -->

<script src="js/app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>[/CODE]
 
Hi. I am working on a project that has multiple pages. The two pages that i have posted below are the home and contact page. In my console on the contact page i have no errors but when I navigate to my home page I get an error that reads Uncaught TypeError: Cannot read properties of null (reading 'addEventListener'). My script tags are at the bottom and I tried adding a onload to the body and wrapping my code in a function in JavaScript with an event listener of DOMContentLoaded.The line that the error references in my javascript file is regarding my event listener on a form .How can i fix this error?


HTML:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SwimFront | Home</title>
    <link rel="shortcut icon" href="img/swimming-icon.svg" type="image/x-icon">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="self-host/all.css">
    <link rel="stylesheet" href="css/all.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
</head>
<body onload="loadHome()">
    <!-- Top Section Of Home Page-->
    <aside class="sidebar">
        <div class="sidebar-header ">
            <h2 class="">Swim Front</h2>
            <button id="close-toggle-btn">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <ul id="sidebar-links" class="mt-4 pt-4">
            <li><a href="index.html" class=" nav-link pt-2 hover-1"><i class="fa-solid fa-house"></i> Home</a></li>
            <li><a href="appointment.html" class="nav-link pt-2 hover-1"> <i class="fa-solid fa-clock"></i> Appointments</a></li>
            <li><a href="contact.html" class="nav-link pt-2 hover-1"><i class="fa-solid fa-envelope"></i> Contact</a></li>
            <li><a href="login.html" class="nav-link pt-2 hover-1 "><i class="fa-solid fa-water-ladder"></i> Login</a></li>
            <li><a href="" id="" class="social-icon nav-link hover-2"><i class="fa-brands fa-instagram "></i></a></li>
            <li><a href="" id="" class="social-icon nav-link hover-1"><i class="fa-brands fa-facebook "></i></a> </li>
           
           
            <nav class="d-flex flex-column ">
                <li class=""><a href="" id="" class="hover-1">Swim Tips</a></li>
                <li class=""><a href="" id="" class="hover-1"> FAQ</a></li>
                <li class=""><a href="" id="" class="hover-1">Swim Class Info</a></li>
            </nav>
        </ul>
       
    </aside>
    <header id="header-nav" class=" navbar d-flex align-items-center" >
        <div class="container-fluid">
            <h1 id="branding" class="me-auto">Swim <span class="brand-highlight">Front <i class="fa-solid fa-water"></i></span></h1>
            <button id="sidebar-toggle-btn" class="btn" type="button">
                <span class="navbar-toggler-icon "></span>
            </button>
           
            <!-- <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav d-flex align-items-center ms-auto ">
                    <a href="index.html" class=" nav-link pt-2 px-lg-3"><i class="fa-solid fa-house"></i> Home</a>
                    <a href="appointment.html" class="nav-link pt-2  px-lg-3"><i class="fa-solid fa-clock"></i>  Appointments</a>
                    <a href="contact.html" class="nav-link pt-2  px-lg-3"><i class="fa-solid fa-envelope"></i> Contact</a>
                    <a href="login.html" class="nav-link pt-2  px-lg-3"><i class="fa-solid fa-water-ladder"></i> Login</a>
                </ul>
            </div> -->
             
           
        </div>
    </header>
    <div id="home-top">

        <!-- Header Navigation-->
     
        <!-- End Of Header Navigation-->

        <!-- Home Showcase Area -->
        <main id="showcase" class="">
            <div id="inner-showcase" class="container-fluid d-flex flex-column text-center pt-4">
                <h1 id="showcase-heading" class="py-3 text-dark fw-bold ">Dive In For A Swim</h1>
                <p id="showcase-paragraph fw-light"> Water can be a very frightening terriority to explore for some newcomers, Thats why SwimFront Instructor Francine provides a transparent background on herself showing her knowledge, comfrtablity, and overall qualifications to teach swimming. Francine confidelty believes anyone can swim. Click the button below and find out more.</p>
                <button class=" w-50 align-self-center mt-4 mb-1 p-2 rounded" id="about-btn"> <a href="about.html" class="about-link text-dark fw-light">Get Started</a></button>
                <img src="img/swimmer.gif" id="showcase-img" alt="" srcset="" class="img-fluid "  height="">
            </div>
        </main>
        <!--End Of Home Showcase Area-->
    </div>
    <!-- End Of Top Section Of Home Page-->

    <!-- Bottom Of Home Page-->
    <div id="bottom">

        <div class="container-xl">
            <div class="row d-flex align-items-center">
                <div id="about-us-showcase" class="col-row col-lg-7 ">
                    <div id="about-us-inner-showcase" class="d-flex flex-column px-4">
                        <h2 id="about-us-showcase-header" class="w-50 ms-auto me-auto text-center fw-light">About Us</h2>
                        <h5 id="slide-title" class="fw-light text-center text-dark pt-4">Welcome</h5>
                        <p class="text-center fw-light">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis asperiores vel at explicabo magnam sunt distinctio facere rerum quo dolor voluptatem suscipit, impedit fugiat eveniet recusandae molestiae? Esse totam nam voluptatem, excepturi quasi eaque dolorum ratione natus tenetur! Maiores quibusdam vitae reprehenderit repudiandae perferendis quod obcaecati commodi fugiat ipsum reiciendis.</p>
                        <div id="about-us-article-btns" class="d-flex justify-content-center">
                            <button id="prev-about-us-article" class="about-us-article-btn me-2 p-2 rounded">Previous</button>
                            <button id="next-about-us-article" class="about-us-article-btn ms-2 p-2 rounded">Next</button>
                        </div>
                    </div>
                </div>
                <div id="about-photos" class="col-row col-lg-5">
                    <div class="container-fluid">
                        <div id="photos" class="row">
                            <div class="col about-us-photo d-flex justify-self-center">
                                <div class="img-fluid">
                                    <img src="img/francine-coaching-1.jfif" alt="" srcset="">
                                </div>
                            </div>
                            <div class="col about-us-photo">
                                <div class="img-fluid pb-2">
                                    <img src="img/francine-img-1.jfif" alt="" srcset="">
                                </div>
                            </div>
                            <div class="col about-us-photo d-flex">
                                <div class="img-fluid">
                                    <img class="ms-auto " src="img/swim-team-img-1.jpg" alt="" srcset="">

                                </div>
                            </div>
                            <div class="w-100"></div>
                            <div class="col about-us-photo">
                                <div class="img-fluid">
                                    <img src="img/swim-meet-1.jpg" alt="" srcset="">
                                </div>
                            </div>
                            <div class="col about-us-photo">
                                <div class="img-fluid">
                                    <img src="img/download.png" alt="">
                                </div>
                            </div>
                            <div class="col about-us-photo">
                                <div class="img-fluid">
                                    <img src="img/francine-coaching-1.jfif" alt="" srcset="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <!-- End Of Bottom-->

    <!-- Footer-->
    <footer id="footer" class="bg-info">

        <div class="container">
            <div id="footer-branding" class="">
                <p class="text-center pt-4 fw-bold text-light">SwimFront , 2023 &#169 </p>
                <p id="manic-branding" class="text-center pt-3 fw-bold">Created By <span class="branding-arrow lesser-branding-arrow"><</span> <span class="cm-green cm-code-branding">Code</span><span class="cm-error">Manic</span> <i class="fa-solid fa-masks-theater "></i> <span class="branding-arrow greater-branding-arrow">></span> Website Services</p>
            </div>
            <div id="footer-links">
               
                <div id="footer-social-media" class="text-light d-flex justify-content-center pt-2">
                    <div class="d-flex flex-column fw-bold px-4 pt-2">
                        <p class="pay-paragraph">Payments Accepted</p>
                    </div>
                </div>
                <div id="payments-accepted" class="d-flex justify-content-center align-items-center ">
                        <i class="fa-brands fa-apple-pay"></i>
                        <p class="mx-4">Cash Payments</p>
                        <p>Cash App</p>
                </div>
            </div>
        </div>

    </footer>
    <!-- Footer -->

    <script  src="js/app.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

</body>
</html>
HTML:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>SwimFront | Contact Us</title>
        <link rel="shortcut icon" href="img/swimming-icon.svg" type="image/x-icon">
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="self-host/all.css">
        <link rel="stylesheet" href="css/all.css">
        <link rel="stylesheet" href="css/bootstrap.min.css">
    </head>
    <body onload="loadContact()">
        <aside class="sidebar">
            <div class="sidebar-header bg-info">
                <h2 class="">Swim Front</h2>
                <button id="close-toggle-btn">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <ul id="sidebar-links" class="mt-4 pt-4">
                <li><a href="index.html" class=" nav-link pt-2 hover-1"><i class="fa-solid fa-house"></i> Home</a></li>
                <li><a href="appointment.html" class="nav-link pt-2 hover-1"> <i class="fa-solid fa-clock"></i> Appointments</a></li>
                <li><a href="contact.html" class="nav-link pt-2 hover-1"><i class="fa-solid fa-envelope"></i> Contact</a></li>
                <li><a href="login.html" class="nav-link pt-2 hover-1 "><i class="fa-solid fa-water-ladder"></i> Login</a></li>
                <li><a href="" id="" class="social-icon nav-link hover-2"><i class="fa-brands fa-instagram "></i></a></li>
                <li><a href="" id="" class="social-icon nav-link hover-1"><i class="fa-brands fa-facebook "></i></a> </li>
               
               
                <nav class="d-flex flex-column ">
                    <li class=""><a href="" id="" class="hover-1">Swim Tips</a></li>
                    <li class=""><a href="" id="" class="hover-1"> FAQ</a></li>
                    <li class=""><a href="" id="" class="hover-1">Swim Class Info</a></li>
                </nav>
            </ul>
           
        </aside>
        <header id="header-nav" class=" navbar d-flex align-items-center" >
            <div class="container-fluid">
                <h1 id="branding" class="me-auto pt-1">Swim <span class="brand-highlight">Front <i class="fa-solid fa-water"></i></span></h1>
                <button id="sidebar-toggle-btn" class="btn" type="button">
                    <span class="navbar-toggler-icon "></span>
                </button>
            </div>
        </header>

        <!-- Contact Showcase Area -->
        <main id="contact-showcase">
            <div class="container">
                <div id="inner-contact-showcase" class="d-flex my-4">
                    <div id="contact-showcase-card" class="ms-auto me-auto my-2 d-flex flex-column">
                        <div id="contact-showcase-card-heading" class="d-flex justify-content-center">
                            <h1 id="contact-showcase-card-header" class="fw-light text-info">Contact Us</h1>
                        </div>
                        <div class="empty">

                        </div>
                        <form action="" id="contact-form" class="form-group flex-column">
                            <div id="name-area" class="mt-2">
                                <div class="d-flex  w-75 ms-auto me-auto ">
                                    <div class="w-50 me-4 ">
                                        <label for="firstName"> First Name <span class="last-name-span"></span> </label>
                                        <input type="text" id="first-name" name="firstName" class="form-control me-4">
                                    </div>
                                    <div class="w-50 me-4">
                                        <label for="lastName" id="lastN" class=""> Last Name <span class="last-name-span"></span></label>
                                        <input type="text" id="last-name" name="firstName" class="form-control me-4 ">
                                    </div>
                                </div>
                            </div>
                            <div id="email-number-area" class="mt-2">
                                <div class="d-flex w-75 ms-auto me-auto">
                                    <div class="w-50 me-4">
                                        <label for="phoneNumber"> Phone Number</label>
                                        <input type="text" id="phone-number" name="phoneNumber" class="form-control me-4">
                                   </div>
                                    <div class="w-50 me-4">
                                        <label for="email"> Email</label>
                                        <input type="text" id="email" name="email" class="form-control me-4 ">
                                    </div>
                                </div>
                            </div>
                            <div id="preffered-contact-area" class="mt-2">
                                <div class="w-75 ms-auto me-auto">
                                    <div id="preffered-contact-inner" class="d-flex  justify-content-md-around">
                                        <p class="me-3">Preffered Contact</p>
                                        <div class="d-flex ms-sm-2 ms-md-none">
                                            <div class="form-check">
                                                <input type="radio" class=" mx-1  form-check-input" id="radio1" name="optradio" value="option1" checked> Phone
                                                <label class="form-check-label" for="radio1"></label>
                                            </div>
                                            <div class="form-check mx-2">
                                                <input type="radio" class="form-check-input" id="radio2" name="optradio" value="option2">Email
                                                <label class="form-check-label" for="radio2"></label>
                                            </div>
                                            <div id="contact-border"></div>
                                        </div>
                                    </div>  
                                </div>
                            </div>
                            <div id="issue-selector-area" class="mt-2">
                                <div class="w-50 ms-auto me-auto">
                                    <select class="form-select text-center" aria-label="Default select example">
                                        <option selected>Select Email Topic</option>
                                        <option value="1">Website Issue</option>
                                        <option value="2">General Question</option>
                                        <option value="3">Other</option>
                                      </select>
                                </div>
                            </div>
                            <div id="text-input-area" class="m-3 d-flex justify-content-center">
                                <div class="w-75 d-flex justify-content-center">
                                    <textarea name="" id="contact-text-area" ></textarea>
                                </div>
                            </div>
                            <div id="send-email-area" class="my-2 pb-2">
                                <div class="w-75 d-flex justify-content-center ms-auto me-auto">
                                    <button id="contact-btn" type="submit" class="rounded bg-info">Send</button>
                                </div>
                            </div>

                        </form>
                    </div>
                </div>
            </div>
        </main>

        <!-- End Of Contact Showcase Area-->
       
       
         <!-- Footer-->
    <footer id="footer" class="bg-info">

        <div class="container">
            <div id="footer-branding" class="">
                <p class="text-center pt-4 fw-bold text-light">SwimFront , 2023 &#169 </p>
                <p id="manic-branding" class="text-center pt-3 fw-bold">Created By <span class="branding-arrow lesser-branding-arrow"><</span> <span class="cm-green cm-code-branding">Code</span><span class="cm-error">Manic</span> <i class="fa-solid fa-masks-theater "></i> <span class="branding-arrow greater-branding-arrow">></span> Website Services</p>
            </div>
            <div id="footer-links">
                <nav class="d-flex justify-content-center pt-3">
                    <li class="text-light"><a href="" id="" class="text-light">Swim Tips</a></li>
                    <li class="mx-4 text-light"><a href="" id="" class="text-light"> FAQ</a></li>
                    <li class="text-light"><a href="" id="" class="text-light">Swim Class Info</a></li>
                </nav>
                <div id="footer-social-media" class="text-light d-flex justify-content-between pt-4">
                    <a href="" id="" class="social-icon"><i class="fa-brands fa-facebook text-light"></i></a>
                    <div class="d-flex flex-column fw-bold px-4 pt-2">
                        <p class="pay-paragraph">Payments Accepted</p>
[CODE=javascript] const toggleBtn = document.getElementById('sidebar-toggle-btn');
        const sidebar = document.querySelector('.sidebar');
        const closeBtn = document.querySelector('#close-toggle-btn');
        console.log(toggleBtn,sidebar)

        toggleBtn.addEventListener('click', function(){
         
           sidebar.classList.toggle('show-sidebar')
        })

        closeBtn.addEventListener('click', function(){
            sidebar.classList.remove('show-sidebar')
        })
   

window.addEventListener('DOMContentLoaded', function(e){
   
    console.log(e.currentTarget)
})

const contactForm = document.querySelector('#contact-form')
const contactFirstName = document.querySelector('#first-name')
const contactLastName = document.querySelector('#last-name')


function loadContact(){
 
    window.addEventListener('DOMContentLoaded',function(){
       
        const form = document.querySelector('#contact-form');
        console.log(form)
        const firstName = this.document.querySelector('#first-name')
        const lastName = this.document.querySelector('#last-name')
        const empty = this.document.querySelector('.empty')
        console.log(firstName,lastName,empty)
        form.addEventListener('submit',function(e){
            e.preventDefault()
            console.log('submit')
            firstName.addEventListener('input', words)
            lastName.addEventListener('input', words)
            firstName.removeEventListener('input',words)
            lastName.removeEventListener('input',words)
            words()
            firstName.value = ""
            lastName.value = ""
        })
       

        function words(first, last){
           
            first = firstName.value;
            last = lastName.value;
           
            console.log(first, last)

            if(first.length === 0 && last.length === 0){
                empty.textContent = " Mutiple Fields Missing"
                empty.classList.add('text-error')
                console.log(empty.innerHTML)
                const span = document.querySelectorAll('.last-name-span')
                span.forEach(span => {
                    console.log(span)
                    const element = document.createElement('i')
                    element.classList.add('fa-solid', 'fa-circle-xmark')
                    element.style.color = "#ed4337"
                    span.appendChild(element)
                    let childNodes = span.childNodes.length;
                    console.log(childNodes)
                    if(childNodes >= 2){
                        span.removeChild(element)
                    }
                })
               
               
               
            }  


           


        }

     

    })
   

}
loadContact()




   












loadHome()
function loadHome(){
    window.addEventListener('DOMContentLoaded',function(e){
        console.log('loaded home')
       
    })
   
}

loadLogin()
function loadLogin(){
    window.addEventListener('DOMContentLoaded',function(e){
        console.log('loaded login')
       
    })
   
}
</div>
<a href="" id="" class="social-icon"><i class="fa-brands fa-instagram text-light"></i></a>
</div>
<div id="payments-accepted" class="d-flex justify-content-center align-items-center ">
<i class="fa-brands fa-apple-pay"></i>
<p class="mx-4">Cash Payments</p>
<p>Cash App</p>
</div>
</div>
</div>

</footer>
<!-- Footer -->

<script src="js/app.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>[/CODE]
Hey there,
That error message means that whatever you are trying to add that event listener to, is either a) not loaded in DOM by the time the function is triggered, or b) it doesn't exist
 
this line
<li><a href="" id="" class="social-icon nav-link hover-2">
IDs can not be empty, assign something to these (there is more than one occurrence) IDs. If fact remove or assign something to all of your empty values. height - "" just does not work.
 
Once again I repeat my strong recommendation to run any HTML through the W3C Online HTML validator and fix all errors before submitting any questions in the forum. Your posted code has a grand total of 22 errors, mostly (but not all) about empty/duplicate ID's. Really, this validator ought to be everybody's best friend !
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom