CODEWITHSUNDEEP
javascriptphphtmljquery
Satanshu Mishra
Satanshu Mishra

Reputation: 25

JS Toggle not being reflected when I dynamically load in HTML using PHP

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> &nbsp;<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> &nbsp;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>&nbsp;&nbsp;<span>Log In</span>
                </button>
              </a>
            </div>
            
            <div class="dropdown">
              <button class="log-in">
                <i class="fa-regular fa-user"></i> &nbsp;<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> &nbsp;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:

enter image description here

enter image description here

All the code required to replicate the problem should be provided above.

EDIT: For testing you will need to include session_start(); at the top of your .php document.

Code Sample: https://jsfiddle.net/sfoyjmh8/10/

EDIT: I have identified the error. Within the JS, if I were to remove || (!event.target.matches(".logged-in")) from the if condition of the onclick function that closes the dropdown if the user clicks outside of it, the dropdown works. So how can I go about modifying this to not be an error?

Upvotes: 1

Views: 47

Answers (1)

ADyson
ADyson

Reputation: 61915

In

if (
      !event.target.matches(".log-in") ||
      !event.target.matches(".logged-in")
    )

you probably want && instead of ||, because you only want it to proceed if the click happened on neither of those buttons, not if it didn't happen to only one of them.

Upvotes: 0

Related Questions