我正在为学校制作一个项目，当我测试它时，我正在为其制作一个下拉菜单，JavaScript控制台显示：“htmlmenubutton”的定义与cssmenubutton和jsmenubutton不同
html:
<!DOCTYPE html>
<html>
<head>
<script src="main.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<a href="index.html"><image src="AIG.svg" alt="AIG"></image></a>
<div id="bar">
<button href="" id="wordopen" class="topbar">view word document</button><button class="topbar" onclick="htmlshow();">html</button><button class="topbar" onclick="cssshow();">css</button><button class="topbar" onclick="javascriptshow();">javascript</button>
</div>
<div id="html">
<a class="htmlmenubutton" onclick="htmlhide();">✗</a>
<a class="htmlmenubutton" href="">tag definitions and examples</a>
</div>
<div id="css">
<a class="cssmenubutton" onclick="csshide();">✗</a>
<a class="cssmenubutton">different css styles and settings</a>
</div>
<div id="javascript">
<a class="jsmenubutton" onclick="javascripthide();">✗</a>
<a class="jsmenubutton">functions</a>
<a class="jsmenubutton">variables</a>
<a class="jsmenubutton">if's</a>
</div>
</body>
</html>
CSS：
#wordopen {
color:white;
background-color: blue;
transition-duration: 0.4s;
}
#wordopen:hover {
color:blue;
background-color: white;
}
.topbar {
color:white;
background-color: blue;
transition-duration: 0.4s;
float: left;
}
.topbar:hover {
color:blue;
background-color: white;
float: left;
}
#bar {
background-color: blue;
width: auto;
}
.htmlmenubutton {
background-color: rgb(255, 255, 255);
color:black;
display: none;
}
.cssmenubutton {
background-color: rgb(255, 255, 255);
color:black;
display: none;
}
.jsmenubutton {
background-color: rgb(255, 255, 255);
color:black;
display: none;
}
javascript:
document.getElementsByClassName(htmlmenubutton).style.display = 'none';
document.getElementsByClassName(cssmenubutton).style.display = 'none';
document.getElementsByClassName(jsmenubutton).style.display = 'none';
function htmlshow() {
document.getElementsByClassName(htmlmenubutton).style.display = 'block';
}
function cssshow() {
document.getElementsByClassName(cssmenubutton).style.display = 'block';
}
function javascriptshow(){
document.getElementsByClassName(jsmenubutton).style.display = 'block';
}
function htmlhide() {
document.getElementsByClassName(htmlmenubutton).style.display = 'none';
}
function csshide() {
document.getElementsByClassName(cssmenubutton).style.display = 'none';
}
function javascripthide() {
document.getElementsByClassName(jsmenubutton).style.display = 'none';
}
我尝试过使用变量，基本上完全重写了js代码，但我的尝试都不起作用。
请帮忙。
你犯了一个简单的错误。类名必须是字符串，并且您放置了未声明的变量。基本上它只需要引用。
document.getElementsByClassName('htmlmenubutton').style.display = 'none';
document.getElementsByClassName('cssmenubutton').style.display = 'none';
document.getElementsByClassName('jsmenubutton').style.display = 'none';