我用HTML CSS和JavaScript制作了管理面板我制作了按钮来移动菜单，但是当我测试控制台和播放器菜单时，它不像那样工作，没有改变菜单部分。
全屏时的效果
和测试我把控制台日志123，但这仍然不工作。CSS可能是问题所在吗?还是HTML有问题?因为在控制台它不会给我任何错误。清空Google Chrome控制台
const playerMenuButton = document.getElementById('playerMenuButton')
const playerMenu = document.getElementById('playerMenu')
playerMenuButton.addEventListener('click', () => {
console.log(123)
});@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap');
.main-container {
width: 100%;
height: 50vh;
background-color: #000;
position: relative;
margin: 0px;
opacity: 1;
}
.buttons-container{
height: 44px;
width: 100%;
bottom: 0px;
position: absolute
}
.button {
width: 120px;
height: 32px;
margin-left: 20px;
background-color: #434343;
text-decoration: none;
border: none;
color: #fff;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
font-family: 'Roboto', sans-serif
}
.chat {
color:#434343 ;
background-color: #434343 ;
text-decoration: none;
border: none;
color: #fff;
width: 100%;
height: 32px;
border-radius: 0px;
outline: none;
}
.div-chat {
position:absolute;
margin-left: 20px;
bottom: 60px;
width: 193vh;
}
.playerMenu {
width: 100%;
height: 50vh;
background-color: #000;
transform: translate(00%, -100%);
opacity: 0;
}
.PlayerInfo {
font-size: 9px;
margin-top: 5px;
margin-left: 20px;
}
h1 {
color: #fff;
font-family: 'Open Sans', sans-serif;
font-family: 'Roboto', sans-serif
}
.playerMenu input {
margin-top: 10px;
margin-left: 20px;
}
.playerMenu.show {
opacity: 1;
}<!doctype html>
<html>
<head>
<title>AdminPanel | By Richok</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main-container">
<div class="div-chat">
<input class="chat" type="text">
</div>
<div class="buttons-container">
<button id="" class="button">Console</button>
<button id="" class="button">chat</button>
<button id="playerMenuButton" class="button">Player</button>
<button id="" class="button">Cars</button>
<button id="" class="button">Capt</button>
<button id="" class="button">Controls</button>
<button id="" class="button">AntiCheat</button>
<button id="" class="button">Test</button>
</div>
</div>
<div id = "playerMenu" class="playerMenu">
<input class="chat" type="text">
<div class="PlayerInfo">
<h1>Name:</h1>
<h1>Social Club:</h1>
<h1>$</h1>
<h1>Phone number</h1>
<h1>Home:</h1>
<h1>Warns:</h1>
<h1>Fraction:</h1>
<h1>Bussiens</h1>
<h1>Login</h1>
</div>
<div class="buttons-container">
<button id="" class="button">Console</button>
<button id="" class="button">chat</button>
<button id="playerMenuButton" class="button">Player</button>
<button id="" class="button">Cars</button>
<button id="" class="button">Capt</button>
<button id="" class="button">Controls</button>
<button id="" class="button">AntiCheat</button>
<button id="" class="button">Test</button>
</div>
</div>
</body>
<script src="js/app.js"></script>
</html>问题出在css中，我添加了position:relative;和z - index: 1;到。button类，这样你就可以给它们添加事件并点击了
const playerMenuButton = document.getElementById('playerMenuButton');
const playerMenu = document.getElementById('playerMenu');
playerMenuButton.addEventListener('click', () => {
console.log(123)
});@import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap');
.main-container {
width: 100%;
height: 50vh;
background-color: #000;
position: relative;
margin: 0px;
opacity: 1;
}
.buttons-container{
height: 44px;
width: 100%;
bottom: 0px;
position: absolute
}
.button {
width: 120px;
height: 32px;
margin-left: 20px;
background-color: #434343;
text-decoration: none;
border: none;
color: #fff;
font-size: 16px;
font-family: 'Open Sans', sans-serif;
font-family: 'Roboto', sans-serif;
position:relative;
z-index:1;
}
.chat {
color:#434343 ;
background-color: #434343 ;
text-decoration: none;
border: none;
color: #fff;
width: 100%;
height: 32px;
border-radius: 0px;
outline: none;
}
.div-chat {
position:absolute;
margin-left: 20px;
bottom: 60px;
width: 193vh;
}
.playerMenu {
width: 100%;
height: 50vh;
background-color: #000;
transform: translate(00%, -100%);
opacity: 0;
}
.PlayerInfo {
font-size: 9px;
margin-top: 5px;
margin-left: 20px;
}
h1 {
color: #fff;
font-family: 'Open Sans', sans-serif;
font-family: 'Roboto', sans-serif
}
.playerMenu input {
margin-top: 10px;
margin-left: 20px;
}
.playerMenu.show {
opacity: 1;
}<!doctype html>
<html>
<head>
<title>AdminPanel | By Richok</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main-container">
<div class="div-chat">
<input class="chat" type="text">
</div>
<div class="buttons-container">
<button id="" class="button">Console</button>
<button id="" class="button">chat</button>
<button id="playerMenuButton" class="button">Player</button>
<button id="" class="button">Cars</button>
<button id="" class="button">Capt</button>
<button id="" class="button">Controls</button>
<button id="" class="button">AntiCheat</button>
<button id="" class="button">Test</button>
</div>
</div>
<div id = "playerMenu" class="playerMenu">
<input class="chat" type="text">
<div class="PlayerInfo">
<h1>Name:</h1>
<h1>Social Club:</h1>
<h1>$</h1>
<h1>Phone number</h1>
<h1>Home:</h1>
<h1>Warns:</h1>
<h1>Fraction:</h1>
<h1>Bussiens</h1>
<h1>Login</h1>
</div>
<div class="buttons-container">
<button id="" class="button">Console</button>
<button id="" class="button">chat</button>
<button id="playerMenuButton" class="button">Player</button>
<button id="" class="button">Cars</button>
<button id="" class="button">Capt</button>
<button id="" class="button">Controls</button>
<button id="" class="button">AntiCheat</button>
<button id="" class="button">Test</button>
</div>
</div>
</body>
<script src="js/app.js"></script>
</html>