I am trying to use JS to toggle a .show class into a div within my HTML which will change the display: none to display: block. This is for a dropdown menu. I am dynamically loading in two different versions based on whether the user is currently logged in or logged out using PHP.
Here is my PHP/HTML code:
<!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">
<!-- EXTERNAL CSS -->
<link rel="stylesheet" href="../css/navigation-bar-v2.css">
<!-- EXTERNAL SCRIPTS -->
<script src="https://kit.fontawesome.com/ec7e0e3eb8.js" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.1.1.js"
integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
<script src="../js/navigation.js"></script>
</head>
<body>
<nav class="nav-bar">
<div class="section-a">
<a href="../index.php"><img class="logo" src="../images/logoDarkBlue.png" alt="img"></a>
<div style="display: flex; justify-content: start;">
<a href="../index.php">Feed</a>
<a href="#">Discover</a>
</div>
</div>
<form>
<input type="text" class="nav-search" placeholder="Search">
</form>
<div class="section-b">
<?php
if(isset($_SESSION["uid"])){
// LOGGED IN
echo '
<div class="notifications">
<button class="notification-dropdown">
<i class="fa-solid fa-bell"></i>
</button>
</div>
<div class="dropdown">
<button class="logged-in">
<span style="font-size: 20px; margin-right: 0.2em; vertical-align: middle;"><i class="fa-regular fa-circle-user"></i></span>
<span>', $_SESSION["uname"], '</span> <i class="fa-solid fa-angle-down"></i>
</button>
<div id="myDropdown" class="dropdown-content">
<a href="#"><i class="fa-solid fa-circle-info"></i> Terms & Policies</a>
</div>
</div>
</div>
';
}
else {
// LOGGED OUT
echo '
<div id="login-cont">
<a href="../login.php">
<button class="login-btn">
<i class="fa-solid fa-right-to-bracket"></i> <span>Log In</span>
</button>
</a>
</div>
<div class="dropdown">
<button class="log-in">
<i class="fa-regular fa-user"></i> <i class="fa-solid fa-angle-down"></i>
</button>
<div id="myDropdown" class="dropdown-content">
<a href="#"><i class="fa-solid fa-circle-info"></i> Terms & Policies</a>
</div>
</div>
';
}
?>
</nav>
</body>
</html>
Here is my JS:
window.addEventListener("DOMContentLoaded", (event) => {
$(".log-in").click(() => {
openNavDropdown();
});
$(".logged-in").click(() => {
console.log("Click!!!");
openNavDropdown();
});
function openNavDropdown() {
console.log(document.getElementById("myDropdown"));
document.getElementById("myDropdown").classList.toggle("show");
console.log(document.getElementById("myDropdown"));
}
// Close the dropdown if the user clicks outside of it
window.onclick = function (event) {
if (
!event.target.matches(".log-in") ||
!event.target.matches(".logged-in")
) {
var dropdowns = document.getElementsByClassName("dropdown-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains("show")) {
openDropdown.classList.remove("show");
}
}
}
};
});
To debug, I ran some console.log commands within my JS and found that the class was actually being added to the proper div. However, within the added class is not being reflected within the actual source code:
All the code required to replicate the problem should be provided above.
