I have 2 questions
1: I'm very new to coding, so I showed my code to other people and was told that I shouldn't use onclick, but not sure how to rewrite it to something else.
2: When I first launch the code or refresh it, clicking the "Borderlands" button displays the sub-button "Borderlands#2", when it first appears it is lower than I would like, but once you click it again It, the second time it appears, its position is exactly where I want it
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] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I get part of your question because you want to replace onclick. For example, instead of using onclick
you can add an event listener to a buttonconst btn = document.getElementById('your-btn-id') btn.addEventListener('click',someFunction)Event listener means your button will listen until some event happens, you can visit https://developer.mozilla.org/en-US/docs/Web/API/EventTarget /addEventListener
Adding
ulseems to answer the questionHowever, if you are new, you should first learn more about javascript, as for your second question, I didn't get what you wanted to ask, would you mind clarifying?