How to bind two functions to one button?

June 2, 2022

I’m trying to make a click counter for a game I’m making, however for some reason 2 buttons render instead of 1. I’m trying to make one single button have 2 main functions, that being move() and onClick(). But obviously, I’m not doing something right. (designed for internet explorer)

"It looks like your post is mostly code; please add some more details."
🙁

here is the code:

<!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>

>Solution :

<!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>

You can have a root function that calls your other 2 functions. This results in one button calling both your function (one after the other)