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.