We Keep Coding

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

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 class="mobile-menu-icon" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/2048px-Hamburger_icon.svg.png" alt="" />
<div class="mobile-menu">
<img
class="close-menu-icon"
src="https://cdn4.iconfinder.com/data/icons/user-interface-131/32/close-512.png"
alt=""
/>
<ul class="mobile-nav-links">
<li class="features-mobile">Features
<ul class="features-mobile-dropdown">
<li>Todo List</li>
<li>Calenders</li>
<li>Reminders</li>
<li>Planning</li>
</ul>
</li>
<li class="company-mobile">Company</li>
<li>Careers</li>
<li>About</li>
</ul>
<div class="login-register-mobile-container">
<span class="login">Login</span>
<span class="register">Register</span>
</div>
</div>
</nav>
<div class="overlay"></div>
</header>

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.

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;
}

How can I optimize a popup Javascript code?

I'm just starting with Javascript and I made this popup code, and I was wondering if there's another code with the same result or a way of optimizing the Javascript.
The code must make the popup appear when one of the options is clicked and disappear when the click is somewhere else.
Popup code
var activePopup;
document.querySelectorAll('[hasPopup]').forEach((popupParent) => {
popupParent.addEventListener('click', e => {
if (popupParent != activePopup && activePopup != null) {
activePopup.querySelector('[popupContent]').style.display = 'none';
}
window.addEventListener('click', hasClicked => {
let isOnPopup = false;
hasClicked.path.forEach((event) => {
if (event == popupParent) {
isOnPopup = true;
}
})
if (isOnPopup == false){
popupParent.querySelector('[popupContent]').style.display = 'none';
}
})
popupParent.querySelector('[popupContent]').style.display = 'block';
activePopup = popupParent;
})
});

This will do all that you require, but in a much shorter form
puc=document.querySelectorAll("[popupContent]"); // popup divs ...
document.querySelector(".nav-bar__element").onclick=ev=>{
// in case the user clicked on the inner span and not the div:
const pel=[...ev.path].find(e=>e.hasAttribute&&e.hasAttribute("hasPopup"))
if (pel) {
const el=pel.querySelector("[popupContent]");
puc.forEach(d=>d.style.display=d===el?"block":"none")
}
}
body {
margin: 0;
font-family: sans-serif;
height: 100vh;
display: grid;
grid-template-columns: 25fr 75fr;
}
.small-icon {
width: 30px;
height: 30px;
}
[hasPopup] {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin: 30px;
padding: 20px;
border-radius: 10px;
border: 1px solid hsl(0, 0%, 40%);
}
[hasPopup]:hover {
cursor: pointer;
}
[popupContent] {
position: absolute;
cursor: auto;
padding: 20px;
border-radius: 10px;
border: 1px solid hsl(0, 0%, 40%);
left: 110%;
display: none;
}
<div class='nav-bar__element nav-bar__element--utils'>
<div class='utils__notifications' id='utilsNotifications' hasPopup>
<span>Notifications</span>
<div class="notifications-popup" popupContent>
<div>
notifications
</div>
</div>
</div>
<div class='utils__messages' id='utilsMessages' hasPopup>
<span>Messages</span>
<div class="messages-popup" popupContent>
<div>
messages
</div>
</div>
</div>
<div class='utils__settings' id='utilsMessages' hasPopup>
<span>Settings</span>
<div class="settings-popup" popupContent>
<div>
settings
</div>
</div>
</div>
<script type='text/javascript' src='script.js'></script>
</div>

If you are looking for a JS popup than check this:- https://www.gitto.tech/posts/simple-popup-box-using-html-css-and-javascript/
It worked for me this way:
HTML code
<div class="invalid-chars-alert-close-btn" onclick="document.getElementById('invalidChars-1').classList.toggle('active');">x</div>
JS: code inside if invalid characters written in my form then:
document.getElementById("invalidChars-1").classList.toggle("active");

Disabling inactive toggle in jQuery

I have the following functional code. However, I would like to know how I can disable toggle buttons. I always want to have one of my bottom navbar icons active and its respective content should be shown in the main section. If I click on the active navbar icon (the toggle) it wouldn't be deactivated.
Thanks in advance for your help!
$(document).ready(function() {
// only show menu-1
$('.menu-1').click(function() {
if ($('.menu-2, .menu-3').hasClass('active')) {
$('.menu-2, .menu-3').removeClass('active');
$('.content-2, .content-3').removeClass('active');
}
$('.menu-1').toggleClass('active');
$('.content-1').toggleClass('active');
});
// only show menu-2
$('.menu-2').click(function() {
if ($('.menu-1, .menu-3').hasClass('active')) {
$('.menu-1, .menu-3').removeClass('active');
$('.content-1, .content-3').removeClass('active');
}
$('.menu-2').toggleClass('active');
$('.content-2').toggleClass('active');
});
// only show menu-3
$('.menu-3').click(function() {
if ($('.menu-2, .menu-1').hasClass('active')) {
$('.menu-2, .menu-1').removeClass('active');
$('.content-2, .content-1').removeClass('active');
}
$('.menu-3').toggleClass('active');
$('.content-3').toggleClass('active');
});
});
.container {
margin: 0 auto;
background-color: #eee;
border: 1px solid lightgrey;
width: 20vw;
height: 90vh;
font-family: sans-serif;
position: relative;
}
header {
background-color: lightgreen;
padding: 5px;
text-align: center;
text-transform: uppercase;
}
.bottom-navbar {
position: absolute;
bottom: 0;
width: 100%;
padding: 6px 0;
overflow: hidden;
background-color: lightgreen;
border-top: 1px solid var(--color-grey-dark-3);
z-index: 50;
display: flex;
justify-content: space-between;
> a {
display: block;
color: green;
text-align: center;
text-decoration: none;
font-size: 20px;
padding: 0 10px;
&.active {
color: black;
}
}
}
.menu-1.active,
.menu-2.active,
.menu-3.active {
color: black;
}
.content-1,
.content-2,
.content-3 {
display: none;
}
.content-1.active,
.content-2.active,
.content-3.active {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
<div class="container">
<header>My header</header>
<div class="main-content">
<div class="content-1">House content</div>
<div class="content-2">Map content</div>
<div class="content-3">Explore content</div>
<div class="bottom-navbar">
<i class="fa fa-home"></i>
<i class="fa fa-map"></i>
<i class="fa fa-search"></i>
</div>
</div>
If you find it easier, here's my CodePen: https://codepen.io/fergos2/pen/vYYaRzN

You can use this jQuery code. Anyone can enhance that.
$(document).ready(function() {
$('.bottom-navbar a').click(function(){
var cls = $(this).attr('class');
var lastchr = cls.substr(cls.length - 1);
$(this).siblings('a').removeClass('active');
$(this).addClass('active');
$("div[class^='content-'],div[class*=' content-']").removeClass('active');
$('.content-'+ lastchr).addClass('active');
})
});

Instead of toggleClass() you could use addClass():
https://codepen.io/vladanme/pen/LYYBrqJ
$(document).ready(function() {
// only show menu-1
$('.menu-1').click(function() {
if ($('.menu-2, .menu-3').hasClass('active')) {
$('.menu-2, .menu-3').removeClass('active');
$('.content-2, .content-3').removeClass('active');
}
$('.menu-1').addClass('active');
$('.content-1').addClass('active');
});
// only show menu-2
$('.menu-2').click(function() {
if ($('.menu-1, .menu-3').hasClass('active')) {
$('.menu-1, .menu-3').removeClass('active');
$('.content-1, .content-3').removeClass('active');
}
$('.menu-2').addClass('active');
$('.content-2').addClass('active');
});
// only show menu-3
$('.menu-3').click(function() {
if ($('.menu-2, .menu-1').hasClass('active')) {
$('.menu-2, .menu-1').removeClass('active');
$('.content-2, .content-1').removeClass('active');
}
$('.menu-3').addClass('active');
$('.content-3').addClass('active');
});
});

Use addClass() instead of toggleClass().
It looks like you have the code to clear the inactive buttons already. So you're only left with the button that you would like to maintain active.
[..]
$('.menu-1').addClass('active');
$('.content-1').addClass('active');
[..]
[..]
$('.menu-2').addClass('active');
$('.content-2').addClass('active');
[..]
[..]
$('.menu-3').addClass('active');
$('.content-3').addClass('active');
[..]

Different events based on number of clicks

I have been struggling to get something to work:
https://jsfiddle.net/CreativeAU/ys12ed05/
warningbutton.onclick = function buttonClicks() {
count += 1;
if (count > 1) {
window.location.href = "http://www.google.com.au";
}
else {
warningbutton.onclick = function() {warningpopup.style.display = "block";}
}};
What I'm currently trying to do
The first time a user clicks 'Go To Page 2', a warning popup will appear. Once they close the warning and click the button again - it will take them to Page 2.
Right now:
Nothing happens on the first button click.
On the second click, and every button click after = the warning popup appears.
Ideally what I want
When a user arrives to a page (let's call it Page1), I want them to have to have clicked Box 1 OR Box 2 at least once - before clicking the 'Go To Page 2' button. If they haven't - then a 'warning popup' will appear over the screen telling them that they need to. I have very little idea how to code this using other divs.
If anyone is able to help me solve 'Ideally what I want' that would be awesome, but otherwise I will settle for what 'I'm currently trying to do'.
I've set it all up on the JsFiddle page just so you can visualise what I'm after.

this does what you want i think.
the link to google wont work, but this is because of stackoverflow.
var counter = 0;
$(document).ready(function(){
$('#first').click(function(){
counter++
});
$('#second').click(function(){
counter++
});
$('#next-page').click(function(){
if (counter >= 1) {
window.location.href = "http://www.google.com.au";
}else{
$('#warning-popup').css("display", "block");
}
});
$('#warning-popup').click(function(){
$(this).css("display", "none");
});
});
#wrapper {
max-width: 1200px;
margin: 0 auto;
}
#first, #second, #next-page {
text-align: center;
vertical-align: middle;
line-height: 125px;
font-size: 25px;
color: #FFF;
margin: 10px;
}
#first, #second {
display: inline-block;
background-color: #189a3d;
width: 125px;
height: 125px;
}
#next-page {
display: block;
background-color: #2e82d0;
width: 270px;
height: 125px;
}
.overlay {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.75);
text-align: center;
padding-top: 25px;
font-size: 40px;
color: #FFF;
}
#close {
color: orange;
float: right;
font-size: 30px;
text-decoration: underline;
margin-top: -0.35em;
}#wrapper {
max-width: 1200px;
margin: 0 auto;
}
#first, #second, #next-page {
text-align: center;
vertical-align: middle;
line-height: 125px;
font-size: 25px;
color: #FFF;
margin: 10px;
}
#first, #second {
display: inline-block;
background-color: #189a3d;
width: 125px;
height: 125px;
}
#next-page {
display: block;
background-color: #2e82d0;
width: 270px;
height: 125px;
}
.overlay {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.75);
text-align: center;
padding-top: 25px;
font-size: 40px;
color: #FFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="first">B1</div>
<div id="second">B2</div>
<div id="warning-popup" class="overlay">
WARNING TEXT HERE
</div>
<div id="next-page">Go to Page 2</div>
</div>

The following code should work, showing the alert if clicked the first time, and redirecting to google after another click.
var count = 0;
warningbutton.onclick = function buttonClicks() {
count += 1;
if (count > 1) {
window.location.href = "http://www.google.com.au";
}
else {
warningpopup.style.display = "block";
}
};

You need to change your else code.
You bind a new event on click, but do not trigger a click. You simply need to change the display attribute of your warning pop-up, without binding it on the click event.
A simple fix:
if (count > 1) {
window.location.href = "http://www.google.com.au";
}
else {
warningpopup.style.display = "block";
}};

you are basically registering a new function with the onclick event when the count is not greater than 1. solution should be
warningbutton.onclick = function buttonClicks() {
count += 1;
console.log(count);
if (count > 1) {
window.location.href = "http://www.google.com.au";
}
else {
warningpopup.style.display = "block";
}};

Optimize jQuery code

I've written this jQuery code that fades in a overlay with some links over an image. What i found out is that it is painfully slow when I add like 10 of these images. I would really appreciate some tips and tricks on how to make this code faster.
If you have some tips for my HTML and CSS that would be great too ;)
jQuery code
$(document).ready(function() {
var div = $(".thumb").find("div");
div.fadeTo(0, 0);
div.css("display","block");
$(".thumb").hover(
function () {
$(this).children(".download").fadeTo("fast", 1);
$(this).children(".hud").fadeTo("fast", 0.7);
},
function () {
div.fadeTo("fast", 0);
}
);
});
All the code
<style type="text/css">
a:active {
outline:none;
}
:focus {
-moz-outline-style:none;
}
img {
border: none;
}
#backgrounds {
font: 82.5% "Lucida Grande", Lucida, Verdana, sans-serif;
margin: 50px 0 0 0;
padding: 0;
width: 585px;
}
.thumb {
margin: 5px;
position: relative;
float: left;
}
.thumb img {
background: #fff;
border: solid 1px #ccc;
padding: 4px;
}
.thumb div {
display: none;
}
.thumb .download {
color: #fff;
position: absolute;
top: 0;
left: 0;
z-index: 999;
padding: 0 10px;
}
.thumb .download h3 {
font-size: 14px;
margin-bottom: 10px;
margin-top: 13px;
text-align: center;
}
.thumb .download a {
font-size: 11px;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 16px;
}
.thumb .download a:hover {
text-decoration: underline;
}
.thumb .download .left, .thumb .download .right {
width: 44%;
margin: 0;
padding: 4px;
}
.thumb .download .left {
float: left;
text-align: right;
}
.thumb .download .right {
float: right;
text-align: left;
}
.thumb img, .thumb .hud {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.thumb .hud {
width: 100%;
height: 110px;
position: absolute;
top: 0;
left: 0;
background: #000;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var div = $(".thumb").find("div");
div.fadeTo(0, 0);
div.css("display","block");
$(".thumb").hover(
function () {
$(this).children(".download").fadeTo("fast", 1);
$(this).children(".hud").fadeTo("fast", 0.7);
},
function () {
div.fadeTo("fast", 0);
}
);
});
</script>
<div id="backgrounds">
<div class="thumb">
<div class="download">
<h3>Download wallpaper</h3>
<p class="left">
1024x768
1280x800
1280x1024
</p>
<p class="right">
1440x900
1680x1050
1920x1200
</p>
</div>
<div class="hud"></div>
<img alt="image" src="thumb.jpg"/>
</div>
</div>

I got it to respond a little better by simply changing the following within the hover(..):
function () {
$(".download", this).fadeTo("fast", 1);
$(".hud", this).fadeTo("fast", 0.7);
},
function () {
$(".download, .hud", this).fadeTo("fast", 0);
}
The biggest difference comes from only applying the hoverout effect to the event target, no need to reapply to all your divs on the page.

I've put your code into a test page and to be perfectly honest, even with thirty or so .thumb divs it seemed ok - certainly responsive enough to use from my end. Sliding the mouse over a bunch of them means I have to wait for the rollover effect to go through them all which takes a while until it gets to the one I've actually stopped on, but surely that was what you wanted given that you're using 'hover' rather than 'click' (which would certainly remove any speed issues).
I'm not using actual images in my test page, just getting the alt text, so my best current guess would be to make sure all images you're loading are as small filesize as you can possibly make them.

Pre-Select MORE
Good job preselecting the div. Try this way so that it pre-selects the fade in elements as well instead of doing it on hover:
$().ready(function() {
var div = $(".thumb").find("div");
div.fadeTo(0, 0);
div.css("display","block");
$(".thumb").each(function() {
var download = $(this).children(".download");
var hud = $(this).children(".hud");
$(this).hover(
function () {
download.fadeTo("fast", 1);
hud.fadeTo("fast", 0.7);
},
function () {
div.fadeTo("fast", 0);
}
);
});
});

try removing the
:focus {
-moz-outline-style:none;
}
and see what happens