如何为单个HTML按钮绑定两个JS函数解决双按钮渲染问题

页面渲染出2个按钮的直接原因是HTML body区域写了两个独立、样式完全一致的按钮标签：

<button class="PringleButton" onclick="move()">Pringle!</button>
<button class="PringleButton" onClick="onClick()">Pringle!</button>

两个按钮分别绑定了进度条逻辑、点击计数逻辑，因此会同时显示在页面上。
另外原代码还存在逻辑bug：move()函数每次触发都会把进度条宽度重置为0，会导致进度条永远无法累计增长到失败判定阈值，游戏逻辑无法正常运行。

• 删除重复的第二个按钮标签，仅保留1个按钮元素
• 在保留的按钮onclick属性中按顺序调用move()和onClick()两个函数，该写法完全兼容IE浏览器
• 将move()函数内的宽度变量提升到函数外层，避免每次点击重置进度条数值

<!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: 50%;
        transform: translateX(-50%);
        border: 2px solid black;
        background-color: seagreen;
        border-radius: 25%;
        cursor: not-allowed;
    }

    p {
        position: absolute;
        bottom: 100px;
        font-size: 24px;
    }
    </style>
</head>
<body>
<!--button and depletion bar functionality-->

<!--TO DO: 1: Make DP bar length shorter + center it (DONE)
           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();onClick()">Pringle!</button>

<script>
    var clicks = 0;
    var id = undefined;
    var width = 0; // 宽度变量移到外层，避免每次点击重置进度
    function move() {
        var elem = document.getElementById("DPbar");
        if (id) {
            clearInterval(id);
        }
        function frame() {
            if (width >= 15) {
                clearInterval(id);
                alert("You Lose, reload (Ctrl + R) the page to play again!");
            } else {
                width++;
                elem.style.width = width + '%';
                elem.innerHTML = Math.round(width * 6.7) + '%';
            }
        }
        id = setInterval(frame, 75);
    }

    function onClick() {
        clicks += 1;
        document.getElementById("clicks").innerHTML = clicks;
    };
</script>
    <p>Clicks: <a id="clicks">0</a></p>
</body>
</html>

• 调整了DP条和点击计数的定位，改为居中适配不同屏幕宽度，替换了原代码中写死的left:725px偏移值，避免不同分辨率下元素错位
• 对进度条百分比显示做了取整处理，避免出现小数显示的问题

内容的提问来源于stack exchange，提问作者Athrixx