Saya ada 2 soalan
1： Saya sangat baru dalam pengekodan, jadi saya menunjukkan kod saya kepada orang lain dan diberitahu bahawa saya tidak sepatutnya menggunakan onclick, tetapi tidak pasti bagaimana untuk menulis semula kod itu kepada sesuatu yang lain.
2: Apabila saya mula-mula memulakan kod atau menyegarkannya, mengklik butang "Borderlands" memaparkan sub-butang "Borderlands#2", apabila ia mula-mula muncul ia adalah lebih rendah daripada yang saya mahu, tetapi sebaik sahaja anda mengkliknya sekali lagi Ia, kali kedua ia muncul, ia adalah tepat di tempat yang saya mahukan
https://codepen.io/MutantCreator/pen/xxQEeBJ?editors=1000 `
<head>
<title> Games </title>
</head>
<style>
.GamesButton {
position: fixed;
background-color: #494D49;
padding: 14px 10px;
border: 2px solid #000;
border-radius: 10px;
color: greenyellow;
text-align: center;
font-size: 16px;
margin: 5px -3px;
cursor: pointer;
background-image: url('GamingIcon.png');
background-repeat: no-repeat;
background-size: 27px;
background-position: -3px 0px;
}
.GamesButton:hover {
background-color: darkseagreen;
transition-duration: .2s;
}
.button {
background-color: #494D49;
padding: 14px 10px;
border: 2px solid #000;
border-radius: 20px;
color: greenyellow;
text-align: center;
font-size: 16px;
margin: 4px 30px;
cursor: pointer;
}
.subbutton {
background-color: #494D49;
padding: 14px 10px;
border: 2px solid #000;
border-radius: 20px;
color: greenyellow;
text-align: center;
font-size: 16px;
margin: 4px 30px;
margin-left: 50px;
cursor: pointer;
}
body {
background-image: url('CarbonBackground.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
#BorderlandsDV2{
width: 80%;
right: 20px;
padding: 5% 0%;
background-color: #494D49;
margin: 1px 30px;
text-align: center;
color: greenyellow;
border: 2px solid #31CC22;
border-radius: 20px;
}
#RimWorldDV{
width: 80%;
padding: 5% 0%;
background-color: #494D49;
margin-top: .1%;
margin: 1px 30px;
text-align: center;
color: greenyellow;
border: 2px solid #31CC22;
border-radius: 20px;
}
#TarkovDV{
width: 80%;
padding: 5% 0%;
background-color: #494D49;
margin-top: .1%;
margin: 1px 30px;
text-align: center;
color: greenyellow;
border: 2px solid #31CC22;
border-radius: 20px;
}
#TerrariaDV{
width: 80%;
padding: 5% 0%;
background-color: #494D49;
margin-top: .1%;
margin: 1px 30px;
text-align: center;
color: greenyellow;
border: 2px solid #31CC22;
border-radius: 20px;
}
#LeftSideBar{
position: fixed;
left:0px;
top:-4px;
background-color: #494D49;
border: 2px solid #000;
width: 20px;
padding: 5px;
height: 100%;
}
</style>
<script>
function ShowAndHideBorderlandssubclasses() {
var x = document.getElementById("subbuttonebl");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function ShowAndHideBorderlands2() {
var x = document.getElementById("BorderlandsDV2");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function ShowAndHideRimWorld() {
var x = document.getElementById("RimWorldDV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function ShowAndHideTarkov() {
var x = document.getElementById("TarkovDV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function ShowAndHideTerraria() {
var x = document.getElementById("TerrariaDV");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>
<body style="background-color:black;">
<div id="LeftSideBar"></div>
<button onclick="OpenGames()" class="GamesButton"></button>
<li>
<button onclick="ShowAndHideBorderlandssubclasses()" class="button Borderlands">Borderlands</button>
</li>
<li>
<button ID=subbuttonebl style="display:none" onclick="ShowAndHideBorderlands2()"; class="subbutton Borderlands2";>Borderlands #2</button>
</li>
<div style="display:none" id="BorderlandsDV2">
Description for BorderLands
</div>
<li>
<button onclick="ShowAndHideRimWorld()" class="button RimWorld">RimWorld</button>
</li>
<div style="display:none" id="RimWorldDV">
Description for Rimworld
</div>
<li>
<button onclick="ShowAndHideTarkov()" class="button Tarkov">Tarkov</button>
</li>
<div style="display:none" id="TarkovDV">
Description for Tarkov
</div>
<li>
<button onclick="ShowAndHideTerraria()" class="button Terraria">Terraria</button>
</li>
<div style="display:none" id="TerrariaDV">
Description for Terraria
</div>
</body>
` 
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Saya mendapat sebahagian daripada soalan anda kerana anda ingin menggantikan onclick. Contohnya, anda boleh menambahkan pendengar acara pada butang dan bukannya menggunakan onclick
const btn = document.getElementById('your-btn-id') btn.addEventListener('click',someFunction)Pendengar acara bermakna butang anda akan mendengar sehingga beberapa acara berlaku, anda boleh melawati https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
Menambah
ulnampaknya menjawab soalanTetapi jika anda baru, anda harus belajar lebih lanjut tentang javascript terlebih dahulu, untuk soalan kedua anda, saya tidak faham apa yang anda ingin tanyakan, bolehkah anda menjelaskan?