Was soll ich tun, anstatt Onclick zu verwenden? und wie man die Positionierung korrigiert

Ich habe 2 Fragen

1: Ich bin sehr neu im Programmieren, deshalb habe ich meinen Code anderen Leuten gezeigt und mir wurde gesagt, dass ich onclick nicht verwenden sollte, aber ich bin mir nicht sicher, wie ich ihn in etwas anderes umschreiben soll.

2: Wenn ich den Code zum ersten Mal starte oder aktualisiere, wird durch Klicken auf die Schaltfläche „Borderlands“ die Unterschaltfläche „Borderlands#2“ angezeigt. Beim ersten Erscheinen ist sie niedriger als gewünscht, aber wenn Sie erneut darauf klicken, wird sie beim zweiten Mal angezeigt Es schien, es war genau dort, wo ich es haben wollte

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>

P粉136356287368 Tage vor466

Was soll ich tun, anstatt Onclick zu verwenden? und wie man die Positionierung korrigiert

Antworte allen(1)Ich werde antworten