Toggle button onClick method doesn't work

Question

I don't understand why this code doesn't work.

It works on an online platform such as jsfiddle but it doesn't work when I try it on VS Code live server.

This code provide that responsive header. If the size of page less than 1210 pixels navbar not seems. navbar seems if you click the button. Sorry for my english.

https://jsfiddle.net/1n8zv5xL/1/

HTML

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="layout.css">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script src="contact.js"></script>
        <script src="preparePage.js"></script>
    </head>

    <body>
        <a id="infoButton" class="infoButton" href="info.html"></a>
        <a id="bodyButton" class="bodyButton" href="body.html"></a>
        <a id="enterButton" class="enterButton" onclick="preparePage(); return false;"></a>
        <a id="leaveButton" class="leaveButton" href="leave.html"></a>
        <a id="contactButton" class="contactButton" onclick="contact(); return false;"></a>
    </body>

    <footer>
    </footer>
</html>

CSS

@import url("https://db.onlinewebfonts.com/c/b2932945dbc71a0a2a4c03dd305cfe3a?family=Bauhaus");
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }


header {   
    background-color:white;
    justify-content: space-between;
    display: flex;
    align-items: center;
    padding: 25px 15%;
    height: 100px;

   
}




li,a,button {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: 16px;
    color: black;
    text-decoration: none;
}

header h1 {
    font-family: "Bauhaus";
    color:rgba(0, 136, 169, 1);
    font-size: 45px;
    
}

button {
    padding: 9px 25px;
    background-color: rgba(0, 136, 169, 1);
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease 0s;

}

button:hover {

    background-color: rgba(0, 136, 169, 0.8);
}


html{

    overflow-y: scroll;
}







.navbar-links {
    list-style: none;
  }

.navbar-links li {
    display: inline-block;
    padding: 0px 20px;

}
.navbar-links li a {
    transition: all 0.3s ease 0s;
  }


.navbar-links li a:hover {
    color: rgba(0, 136, 169, 1);
}




.logo {
    width: 500px;
    display: flex;
    flex-direction: initial;
    align-items: center;
    justify-content: space-around;
}

.toggle-button {
    
    top: .75rem;
    right: 1rem;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
}

.toggle-button .bar {
    height: 3px;
    width: 100%;
    background-color: black;
    border-radius: 10px;
}

  @media screen and (max-width:1210px) {
    header  {
        
        flex-direction: column;
    }
    .navbar-links {
        
        display: flex;
        flex-direction: column;
        
    }
    .toggle-button {
        display: flex;
    }
    .navbar-links.active {
        display: none;
    }
  }

JAVASCRİPT

const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]

toggleButton.addEventListener('click', () => {
  navbarLinks.classList.toggle('active')
})

Place your custom scripts before the body closing tag `
`
– Toxnyc Dec 20 '20 at 01:33 — Toxnyc, Dec 20 '20 at 01:33

score 0 · Accepted Answer · answered Dec 20 '20 at 01:40

The problem is with the head.

You are including the scripts in head so it will be loaded prior to the document. So, inorder for you to access dom nodes you should listen for the ready event in jquery - or you can move the scripts to the end of the body

Eg:

$(function() {

const toggleButton = document.getElementsByClassName('toggle-button')[0]
const navbarLinks = document.getElementsByClassName('navbar-links')[0]

toggleButton.addEventListener('click', () => {
  navbarLinks.classList.toggle('active')
})

})

OR

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="layout.css">
    </head>

    <body>
        <a id="infoButton" class="infoButton" href="info.html"></a>
        <a id="bodyButton" class="bodyButton" href="body.html"></a>
        <a id="enterButton" class="enterButton" onclick="preparePage(); return false;"></a>
        <a id="leaveButton" class="leaveButton" href="leave.html"></a>
        <a id="contactButton" class="contactButton" onclick="contact(); return false;"></a>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <script src="contact.js"></script>
        <script src="preparePage.js"></script>
    </body>

    <footer>
    </footer>
</html>

That should do the trick.

okay this answer very clearly. Thank you! – Mr. Whestr Dec 20 '20 at 01:45 — Mr. Whestr, Dec 20 '20 at 01:45

Toggle button onClick method doesn't work

1 Answers1