window.innerWidth 如果没有触发

Question

我正在尝试获取一个下拉菜单来显示屏幕尺寸何时小于 500 像素。稍后，我将删除导航栏，以便此菜单在小型设备上替换它。

代码对我来说看起来不错，警报确实会触发，但菜单没有显示。

TLDR：需要在屏幕尺寸小于 500px 时显示菜单

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

代码：

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>

Answer 1

getElementByID是document的方法

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

Answer 2

始终检查控制台是否有错误。例如在 Chrome 中你会看到

Uncaught ReferenceError: getElementById is not defined

应该是：

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

更新小提琴：https://jsfiddle.net/y4edsu73/1/