CODEWITHSUNDEEP
javascripthtmlcss
Michael McGettrick
Michael McGettrick

Reputation: 93

window.innerWidth If Not Firing

I'm trying to get a dropdown menu to show when the size of the screen is smaller than 500px. Later, I will remove the navbar so that this menu replaces it on small devices.

Code looks good to me and the alert DOES fire but the menu doesn't show.

TLDR: Need to make the menu show when screen size is less than 500px

JSFiddle: https://jsfiddle.net/mcgettrm/y4edsu73/

Code:

var dropDownFunction = function(){
	var menuContent = document.getElementById("dropDownMenuClass");
	menuContent.classList.toggle("menuShow");
}


var windowWidth = window.innerWidth;

	if(windowWidth < 500){
		alert("window is too small");
		
		var dropDownMenu = getElementById("dropDownMenu");
		dropDownMenu.classList.toggle("mainMenuShow");
		
		
		
	}
#dropDownMenu {
	
}
.dropDownMenuClass{
	display:none;
}
.mainMenuShow{
	display: block;
}

#dropDownMenuContent {
	
}
.dropDownMenuContentClass {
	display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	width:100%;
	text-align: center;
}
#dropDownMenuContent a {
	color: black;
	padding: 12px 16px;
    text-decoration: none;
    display: block;
	
}
#dropDownMenuContent a:hover {
	background-color: #f1f1f1;

}
#dropDownButton {
	width:100%;
	background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.menuShow {
	display: block;
}
<div id="dropDownMenu" class="dropDownMenuClass">
					<button onclick="dropDownFunction()" id="dropDownButton">MENU</button>
					<div id="dropDownMenuContent" class="dropDownMenuContentClass">
						<a href="index.html">Home</a>
						<a href="about.html">About</a>
						<a href="itprojects.html">IT Projects</a>
						<a href="languageprojects.html">Language Projects</a>
						<a href="contact.html">Contact</a>
						<a href="essays.html">Essays</a>
					</div>
	</div>

Upvotes: 0

Views: 326

Answers (2)

Turnip
Turnip

Reputation: 36672

getElementByID is a method of document

var dropDownMenu = document.getElementById("dropDownMenu");

Upvotes: 2

CupawnTae
CupawnTae

Reputation: 14580

Always check the console for errors. For example in Chrome you will see

Uncaught ReferenceError: getElementById is not defined

It should be:

var dropDownMenu = document.getElementById("dropDownMenu");

Updated fiddle: https://jsfiddle.net/y4edsu73/1/

Upvotes: 1

Related Questions