<分区>
我是 JavaScript 新手，卡在了第一个程序中。当我使用内部 JavaScript 时，它正在工作，但不是来自外部 JavaScript 文件。 JavaScript 在这里不起作用。这里我想使用JavaScript来隐藏和显示菜单项，最后一个元素中的按钮仅用于测试。
showMenu(){
var x = document.getElementById('mainmenu');
if(x.style.display == "none"){
x.style.display="block";
}
else{
x.style.display="none";
}
}
html 的 css
body{
background-color: white;
margin: 0;
padding: 0;
}
#topcontact{
background-color: teal;
margin: -16px 0;
}
#topcontact p{
color:white;
text-align: center;
padding:10px;
}
header{
width:100%;
background-color: white;
}
ul{
flex-flow: right;
margin: 0 auto;
padding: 0;
width: 80%;
}
ul li{
display: inline-block;
list-style: none;
padding: 15px;
}
ul li:hover{
background: lightgrey;
}
ul li a{
text-decoration: none;
text-transform: uppercase;
}
.toggle{
width: 100%;
padding: 10px 20px;
background: #001f44;
text-align: right;
box-sizing: border-box;
color:#fff;
font-size: 30px;
display: none;
}
@media (max-width: 768px){
.toggle{
display: block;
}
ul {
width: 100%;
}
ul li{
display: block;
text-align: center;
}
}
这是我的html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Welcome to JS page</title>
<link rel="stylesheet" type="text/css" href="assets/css/style.css">
<link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">
</head>
<body>
<header>
<div class="toggle">
<i class="fas fa-bars" onclick="showMenu()"></i>
</div>
<div id="mainmenu">
<ul>
<li><a href="#"> Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Education Materials</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
</header>
<button type="button" onclick="document.getElementById('buttonshowing').style.display='block'">Show Data</button>
<div id="buttonshowing" style="display: none;">you clicked show data</div>
<script type="text/javascript" src="/assets/js/mainjs.js"></script>
</body>
</html>