使用其他按钮将 +1 添加到 div

Question

我有一个带有 10 秒计时器的按钮。当计时器运行时，该按钮将禁用 10 秒钟。 10 秒后，该按钮再次启用，您的帐户将获得 +25 美元 (Div)。运行要看的代码片段：

 $('#btn').prop('disabled',true);
    startCountDown();

    function getCounter(){
        return  parseInt($('#counter').html());
    }
    function setCounter(count) {
        $('#counter').html(count);
    }

    $("#btn").click(function() {
        setCounter(getCounter()+25);
        $('#btn').prop('disabled',true);
        startCountDown();
    });

    function startCountDown() {
        var minutes = 0,
            seconds = 10;
        $("#countdown").html(minutes + ":" + seconds);
        var count = setInterval(function() {
            if (parseInt(minutes) < 0 || parseInt(seconds) <=0 ) {
                $("#countdown").html("Collect");
                clearInterval(count);
                $('#btn').prop('disabled',false);
            } else {
                $("#countdown").html(minutes + ":" + seconds);
                seconds--;
                if (seconds < 10) seconds = "0" + seconds;
            }
        }, 1000);
    }

 #total {
        display: inline-flex;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="total">
    <div id="counter">0</div>
    <div id="money">$</div>
</div><br>
<button id="btn">
    <span id="countdown">Collect</span>
</button>

现在我想添加一个您可以一直点击的按钮，每次您点击该按钮时，您的帐户中都会增加 1 美元。当我制作按钮时，一切正常，直到我注意到带有计时器的按钮不再起作用。这是我用于所有内容的代码：

// add one button start

const addOneButton = document.querySelector('.addOneButton');
    addOneButton.onclick = Counter;
    const clicks = document.querySelector('#counter');
    clicks.id = document.querySelector('counter');

    var a = 0;

    function Counter() {
        a += 1;
        clicks.innerHTML = a;
    }

// Timer Button Part start

    $('#btn').prop('disabled',true);
    startCountDown();

    function getCounter(){
        return  parseInt($('#counter').html());
    }
    function setCounter(count) {
        $('#counter').html(count);
    }

    $("#btn").click(function() {
        setCounter(getCounter()+25);
        $('#btn').prop('disabled',true);
        startCountDown();
    });

    function startCountDown() {
        var minutes = 0,
            seconds = 10;
        $("#countdown").html(minutes + ":" + seconds);
        var count = setInterval(function() {
            if (parseInt(minutes) < 0 || parseInt(seconds) <=0 ) {
                $("#countdown").html("Collect");
                clearInterval(count);
                $('#btn').prop('disabled',false);
            } else {
                $("#countdown").html(minutes + ":" + seconds);
                seconds--;
                if (seconds < 10) seconds = "0" + seconds;
            }
        }, 1000);
    }

#total {
        display: inline-flex;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="total">
    <div id="counter">0</div>
    <div id="money">$</div>
</div><br>
<button id="btn">
    <span id="countdown">Collect</span>
</button>

<button class="addOneButton">Add One!</button>

你知道我做错了什么吗？

Answer 1

也许我误解了你的问题，但为什么不添加一个类似的方法来添加 +1，以及 +25。像这样：

$(".addOneButton").click(function() {
   setCounter(getCounter() + 1);
});

$('#btn').prop('disabled',true);
    startCountDown();

    function getCounter(){
        return  parseInt($('#counter').html());
    }
    function setCounter(count) {
        $('#counter').html(count);
    }

    $("#btn").click(function() {
        setCounter(getCounter()+25);
        $('#btn').prop('disabled',true);
        startCountDown();
    });
    
     $(".addOneButton").click(function() {
       setCounter(getCounter() + 1);
     }); 

    function startCountDown() {
        var minutes = 0,
            seconds = 10;
        $("#countdown").html(minutes + ":" + seconds);
        var count = setInterval(function() {
            if (parseInt(minutes) < 0 || parseInt(seconds) <=0 ) {
                $("#countdown").html("Collect");
                clearInterval(count);
                $('#btn').prop('disabled',false);
            } else {
                $("#countdown").html(minutes + ":" + seconds);
                seconds--;
                if (seconds < 10) seconds = "0" + seconds;
            }
        }, 1000);
    }

#total {
        display: inline-flex;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="total">
    <div id="counter">0</div>
    <div id="money">$</div>
</div><br>
<button id="btn">
    <span id="countdown">Collect</span>
</button>
<button class="addOneButton">Add One!</button>

Answer 2

您的计数器 ID 在第二个代码段中显示为未定义。这就是代码无法检索值的原因，因为您再次设置了 id。

clicks.id = document.querySelector('#counter');

只需在您的代码中注释上面的行，它就会按预期运行。

也为了正确的工作。这里是代码中的一点修改

// add one button start

const addOneButton = document.querySelector('.addOneButton');
    addOneButton.onclick = Counter;
    const clicks = document.querySelector('#counter');
    //clicks.id = document.querySelector('#counter');

    var a = 0;

    function Counter() {
        a = getCounter() + 1;
        clicks.innerHTML = a;
    }

// Timer Button Part start

    $('#btn').prop('disabled',true);
    startCountDown();

    function getCounter(){
        return  parseInt($('#counter').html());
    }
    function setCounter(count) {
        $('#counter').html(count);
    }

    $("#btn").click(function() {
        setCounter(getCounter()+25);
        $('#btn').prop('disabled',true);
        startCountDown();
    });

    function startCountDown() {
        var minutes = 0,
            seconds = 1;
        $("#countdown").html(minutes + ":" + seconds);
        var count = setInterval(function() {
            if (parseInt(minutes) < 0 || parseInt(seconds) <=0 ) {
                $("#countdown").html("Collect");
                clearInterval(count);
                $('#btn').prop('disabled',false);
            } else {
                $("#countdown").html(minutes + ":" + seconds);
                seconds--;
                if (seconds < 10) seconds = "0" + seconds;
            }
        }, 1000);
    }

使用其他按钮将 +1 添加到 div

Adding +1 to a div with other button

html

javascript

jquery

timer

disable