J'ai 2 questions
1 : Je suis très nouveau dans le codage, j'ai donc montré mon code à d'autres personnes et on m'a dit que je ne devrais pas utiliser onclick, mais je ne sais pas comment le réécrire dans autre chose.
2 : Lorsque je démarre le code ou que je l'actualise pour la première fois, cliquer sur le bouton "Borderlands" affiche le sous-bouton "Borderlands#2", lorsqu'il apparaît pour la première fois, il est plus bas que je le souhaiterais, mais une fois que vous cliquez à nouveau dessus, la deuxième fois il est apparu, c'était exactement là où je voulais qu'il soit
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] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
J'ai reçu une partie de votre question car vous souhaitez remplacer onclick. Par exemple, au lieu d'utiliser onclick
vous pouvez ajouter un écouteur d'événement à un boutonconst btn = document.getElementById('your-btn-id') btn.addEventListener('click',someFunction)L'écouteur d'événement signifie que votre bouton écoutera jusqu'à ce qu'un événement se produise, vous pouvez visiter https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
L'ajout de
ulsemble répondre à la questionMais si vous êtes nouveau, vous devriez d'abord en apprendre davantage sur javascript, quant à votre deuxième question, je n'ai pas compris ce que vous vouliez demander, pourriez-vous clarifier ?