如何将两个功能绑定到一个按钮？

Question

我正在尝试为我正在制作的游戏制作一个点击计数器，但是由于某种原因渲染了 2 个按钮而不是 1 个。我正在尝试让一个按钮具有 2 个主要功能，即移动() 和 onClick()。但很明显，我做的事情不对。（专为 Internet Explorer 设计）

“看起来您的 post 主要是代码；请添加更多详细信息。” :(

代码如下：

<!DOCTYPE html>
<!--Pringle Clicker 1.0-->
<!--The DP (Depletion Bar) code was origionally from w3schools.com, however it has been heavily modified-->
<html>
<head>
    <title>Pringle Clicker v1.0</title>
    <style> html, body {
        height: 100%;
        margin: 0;
    }

    body {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #9898ff;
        opacity: 0.8;
        background-image: linear-gradient(to right, #4349c2, #4349c2 25px, #5e5eff 25px, #5e5eff );
        background-size: 50px 100%;
    }

    .PringleButton {
        background-color: #FFEA00; /* Pringle Color */
        border: 5px solid black;
        color: black; /* Text Color */
        padding: 86px 52px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 32px;
        border-radius: 100%;
        cursor: copy;
    }

    .PringleButton:hover {background-color: rgba(236, 236, 57, 0.667)}

    .PringleButton:active {
        background-color: rgba(236, 236, 57, 0.667);
        transform: scale(0.9, 0.9);
    }

    .DPbar {
        position: absolute;
        bottom: 200px;
        left: 725px;
        border: 2px solid black;
        background-color: seagreen;
        border-radius: 25%;
        cursor: not-allowed;
    }

    </style>
</head>
<body>
<!--button and depletion bar functionality-->

<!--TO DO: 1: Make DP bar length shorter + center it (DONE 1/2)
           2: DP bar total percentage = 100% (DONE...kinda...)
           3: Tweak depletion speed (DONE)
           4: DP bar does not push pringle button (DONE)
           5: Clicking multiple times does not clone the DP bar (DONE)-->

<div id="DPbar" class="DPbar" style="width:0%">0%</div> <!-- Starting percentage of depletion bar-->
<br>
<button class="PringleButton" onclick="move()">Pringle!</button>
<button class="PringleButton" onClick="onClick()">Pringle!</button>

<script>
    var clicks = 0;
    var id = undefined; // --> MOVED ID OUTSIDE
    function move() {
        var elem = document.getElementById("DPbar");
        var width = 0; // Starting percentage 
        if (id) { // --> CLEAR ID IF EXISTS
            clearInterval(id);
        }
        function frame() {
            if (width >= 15) { // Length of depletion bar (ending percentage)
                clearInterval(id);
                alert("You Lose, reload (Ctrl + R) the page to play again!"); // Message displays after hitting 100% (or whatever is the final percentage)
            } else {
                width++;
                elem.style.width = width + '%'; // Speed of depletion bar also (idk?)
                elem.innerHTML = width * 6.7 + '%'; // Multiplier of percentage
            }
        }
        id = setInterval(frame, 75); // Speed of depletion bar
    }

    function onClick() {
        clicks += 1;
        document.getElementById("clicks").innerHTML = clicks;
    };


    
</script>
    <p>Clicks: <a id="clicks">0</a></p>
</body>
</html>

Answer 1

<!DOCTYPE html>
<!--Pringle Clicker 1.0-->
<!--The DP (Depletion Bar) code was origionally from w3schools.com, however it has been heavily modified-->
<html>
<head>
    <title>Pringle Clicker v1.0</title>
    <style> html, body {
        height: 100%;
        margin: 0;
    }

    body {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #9898ff;
        opacity: 0.8;
        background-image: linear-gradient(to right, #4349c2, #4349c2 25px, #5e5eff 25px, #5e5eff );
        background-size: 50px 100%;
    }

    .PringleButton {
        background-color: #FFEA00; /* Pringle Color */
        border: 5px solid black;
        color: black; /* Text Color */
        padding: 86px 52px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 32px;
        border-radius: 100%;
        cursor: copy;
    }

    .PringleButton:hover {background-color: rgba(236, 236, 57, 0.667)}

    .PringleButton:active {
        background-color: rgba(236, 236, 57, 0.667);
        transform: scale(0.9, 0.9);
    }

    .DPbar {
        position: absolute;
        bottom: 200px;
        left: 725px;
        border: 2px solid black;
        background-color: seagreen;
        border-radius: 25%;
        cursor: not-allowed;
    }

    </style>
</head>
<body>
<!--button and depletion bar functionality-->

<!--TO DO: 1: Make DP bar length shorter + center it (DONE 1/2)
           2: DP bar total percentage = 100% (DONE...kinda...)
           3: Tweak depletion speed (DONE)
           4: DP bar does not push pringle button (DONE)
           5: Clicking multiple times does not clone the DP bar (DONE)-->

<div id="DPbar" class="DPbar" style="width:0%">0%</div> <!-- Starting percentage of depletion bar-->
<br>
<button class="PringleButton" onclick="doBoth()">Pringle!</button>

<script>
    var clicks = 0;
    var id = undefined; // --> MOVED ID OUTSIDE
    function move() {
        var elem = document.getElementById("DPbar");
        var width = 0; // Starting percentage 
        if (id) { // --> CLEAR ID IF EXISTS
            clearInterval(id);
        }
        function frame() {
            if (width >= 15) { // Length of depletion bar (ending percentage)
                clearInterval(id);
                alert("You Lose, reload (Ctrl + R) the page to play again!"); // Message displays after hitting 100% (or whatever is the final percentage)
            } else {
                width++;
                elem.style.width = width + '%'; // Speed of depletion bar also (idk?)
                elem.innerHTML = width * 6.7 + '%'; // Multiplier of percentage
            }
        }
        id = setInterval(frame, 75); // Speed of depletion bar
    }

    function onClick() {
        clicks += 1;
        document.getElementById("clicks").innerHTML = clicks;
    };
    
        function doBoth() {
        onClick();
        move();
    };


    
</script>
    <p>Clicks: <a id="clicks">0</a></p>
</body>
</html>

您可以有一个调用其他 2 个函数的根函数。这导致一个按钮调用您的两个函数（一个接一个）

Answer 2

只需使用 onclick(call1(); call2()) 调用 2 个不同的函数。您不必在一个函数中编写所有内容。

function clickMe() {
  document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
}

function andMe() {
  document.getElementById("demo").innerHTML += " AND ME!";
}

span {
  margin: 3rem;
  background: #fdc23e;
  padding: .5rem 1rem;
  border-radius: .5rem;
  color: #fff;
}

<span onclick="clickMe(); andMe()">Click me.</span>

<p id="demo">Not clicked</p>

如何将两个功能绑定到一个按钮？

How to bind two functions to one button?

html