我有2個問題1：我對編碼非常陌生，所以我向其他人展示了我的程式碼，並被告知我不應該使用onclick，但不知道如何重寫為其他內容。 2：當我第一次啟動程式碼或刷新它時，點擊“Borderlands”按鈕會顯示子按鈕“Borderlands#2”，當它第一次出現時，它比我希望的要低，但是一旦你再次點擊它，它第二次出現它位置就是我想要的位置https://codepen.io/MutantCreator/p

我得到了你問題的一部分，因為你想替換 onclick。例如，您可以為按鈕新增事件偵聽器，而不是使用 onclick const btn = document.getElementById('your-btn-id') btn.addEventListener('click',someFunction) 事件偵聽器表示您的按鈕將偵聽，直到發生某些事件為止，您可以造訪 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget /addEventListener 添加 ul 似乎回答了這個問題但是，如果您是新手，您應該先了解更多 javascript，至於您的第二個問題，我沒有得到您想問的內容，您介意澄清一下嗎？

我應該做什麼而不是使用 Onclick？以及如何修復定位

我有 2 個問題

1：我對編碼非常陌生，所以我向其他人展示了我的程式碼，並被告知我不應該使用 onclick，但不知道如何重寫為其他內容。

2：當我第一次啟動程式碼或刷新它時，單擊“Borderlands”按鈕會顯示子按鈕“Borderlands#2”，當它第一次出現時，它比我希望的要低，但是一旦你再次單擊它，它第二次出現它位置就是我想要的位置

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粉136356287316 天前431

我應該做什麼而不是使用 Onclick？以及如何修復定位

全部回覆(1)我來回復