JavaScript If and else statement w/function calls not producing expected result-CodePudding

I have a mobile menu that includes four list items. When you click on the "Features" list item, another unordered list is supposed to populate below it, and when you click it again, it's supposed to close it.

Here's my issue:

Inside the addEventListener function, I am calling two other functions (displayType and displayTypeCheck) inside the if, and else statement. When I do this and click on the "Features" list item, it opens but does not close when I click it again.

If I don't use the displayType and displayTypeCheck functions in the if and else statement and click on the "Features" list item, the UL will both open and close.

Why does the if and else statement that calls the other two functions not work, and how do I get it to work?

In the provided Javascript code below, the if and else statement that's commented out works, and the block that's not commented out is the code that doesn't entirely work.

const menuIcon = document.querySelector(".mobile-menu-icon");
const mobileMenu = document.querySelector(".mobile-menu");
const closeMenuIcon = document.querySelector(".close-menu-icon");
const featuresMobile = document.querySelector(".features-mobile");
const featuresMobileDropdown = document.querySelector(".features-mobile-dropdown");
const overlay = document.querySelector(".overlay");


function displayType(element, displayValue) {
  element.style.display = displayValue;
}

function displayTypeCheck(element, displayValue) {
  element.style.display === displayValue;
}



menuIcon.addEventListener("click", function () {
  displayType(mobileMenu, 'block');
  displayType(overlay, 'block');
});

closeMenuIcon.addEventListener("click", function () {
  displayType(mobileMenu, 'none');
  displayType(overlay, 'none');
});



featuresMobile.addEventListener("click", function () {
    //   if (featuresMobileDropdown.style.display === "block") {
    //   featuresMobileDropdown.style.display = "none";
    // } else {
    //   featuresMobileDropdown.style.display = "block";
    // }

  if (displayTypeCheck(featuresMobileDropdown, "block")) {
    displayType(featuresMobileDropdown, "none");
  } else {
    displayType(featuresMobileDropdown, "block");
  }
});

@import url("https://fonts.googleapis.com/css2?family=Epilogue:wght@500;700&display=swap");

:root {
  --almostWhite: hsl(0, 0%, 98%);
  --mediumGray: hsl(0, 0%, 41%);
  --almostBlack: hsl(0, 0%, 8%);
  --navDropDownColor: #e9ecef;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ul {
  list-style: none;
}

body {
  min-height: 100vh;
  font-family: "Epilogue", sans-serif;
  background-color: var(--almostWhite);
}

header {
  padding: .9375rem 2.5rem .9375rem 2.5rem;
  max-width: 100rem;
  margin: auto;
}

header nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

header nav ul li {
  cursor: pointer;
}


.register {
  border: .125rem solid var(--mediumGray);
  padding: .625rem .9375rem;
  border-radius: .8125rem;
}

.mobile-menu-icon {
  height: 3.125rem;
}


  .mobile-menu-icon {
    display: block;
    cursor: pointer;
  }

  .mobile-menu .mobile-nav-links {
    margin-top: 4.375em;
    padding-left: .9375em;
    color: var(--mediumGray);
  }

  .mobile-menu ul li {
    padding: .625em;
  }

  .mobile-menu .mobile-nav-links li ul {
    margin-left: .625em;
    margin-top: .625em;
    display: none;
  }

  .mobile-menu {
    background-color: white;
    width: 18.75em;
    height: 100vh;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: none;
  }

  .close-menu-icon {
    margin-left: auto;
    margin-right: 1.25em;
    margin-top: 1.25em;
    display: block;
    cursor: pointer;
    height: 3.125em;
  }

  .login-register-mobile-container {
    color: var(--mediumGray);
    width: 90%;
    margin: 3.125em auto;
  }

  .login-register-mobile-container span {
    display: block;
    text-align: center;
    cursor: pointer;
  }

  .login-register-mobile-container span:first-child {
    margin-bottom: 1.25em;
  }
  
  
   .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(.1875rem);
    z-index: 1;
    display: none;
  }

<header>
      <nav>
        <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/2048px-Hamburger_icon.svg.png" alt="" />
        <div >
          <img
            
            src="https://cdn4.iconfinder.com/data/icons/user-interface-131/32/close-512.png"
            alt=""
          />
          <ul >
            <li >Features
              <ul >
                <li>Todo List</li>
                <li>Calenders</li>
                <li>Reminders</li>
                <li>Planning</li>
              </ul>
            </li>
            <li >Company</li>
            <li>Careers</li>
            <li>About</li>
          </ul>
          <div >
            <span >Login</span>
            <span >Register</span>
          </div>
        </div>
      </nav>
      <div ></div>
    </header>

CodePudding user response：

You forgot the return statement.

function displayTypeCheck(element, displayValue) {
  return element.style.display === displayValue;
}

Otherwise the function will always return undefined which is a falsey value.

CodePudding user response：

Within the displayTypeCheck function, you aren't returning the boolean result of the conditions.

Without the return statement, it is returning void

function displayTypeCheck(element, displayValue) {
  return element.style.display === displayValue;
}