我应该做什么而不是使用 Onclick？以及如何修复定位-PHP中文网问答

我有 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>

全部回复(1)

P粉9663356692024-01-17 17:51:34 1楼

我得到了你问题的一部分，因为你想替换 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，至于您的第二个问题，我没有得到您想问的内容，您介意澄清一下吗？

赞 +0

添加回复