-4
\$\begingroup\$

I have just started on a new short game and i am trying to figure out how to make a reward when i reach a certain value I expect that the counter starts at zero, and each time the button is clicked it goes up by one, until it reaches 10, then the next time the button is pressed the counter should go up by 2. Instead, I find that clicking the button does not change the displayed count.

<!DOCTYPE html>
    <html>
     <body>
    
<p>
    The button was clicked
    <span class="total-clicks"></span>
    times
</p>

<button id="btn1" onclick="addClick()">
    Click Me!
</button>

<script type="text/javascript">
    let clicks = 0;
    let click_power = 1;
    let reward_recevied = false;

    function addClick() {
    clicks = clicks + click_power;
    if(clicks >= 10 && reward_received == false) {
        click_power = click_power + 1;
        reward_received = true;
    }
}
    function addClick() {
        clicks = clicks + 1;
        document.querySelector('.total-clicks').textContent
            = clicks;
    }



    

    // Simulate click function
    function clickButton() {
        document.querySelector('#btn1').click();
    }

        </script>
    </body>
</html>
\$\endgroup\$
1
  • \$\begingroup\$ No need to apologize, just be specific. Something like "I expect that the counter starts at zero, and each time the button is clicked it goes up by one, until it reaches 10, then the next time the button is pressed the counter should go up by 2. Instead, I find that clicking the button does not change the displayed count. The browser's javascript console displays the following errors..." \$\endgroup\$
    – DMGregory ♦
    Commented Nov 16, 2023 at 17:07

1 Answer 1

Reset to default
1
\$\begingroup\$

If you want to increase the first 10 times the variable clicks + 1, and after 10, clicks + 2 you need to make sure that the names of the variables in the code are reward_received everywhere and write the code for the addClick() function once.

In your code you overwrite addClick() function by writing it a second time.

You can view errors in your javascript if you open the HTML file in the browser by pressing F12.

Here is probably the code you wanted:

<!DOCTYPE html>
<html>
    <body>
        <p>
            The button was clicked
            <span class="total-clicks"></span>
            times
        </p>
        <button id="btn1" onclick="addClick()">
            Click Me!
        </button>
        <script type="text/javascript">
            let clicks = 0;
            let click_power = 1;
            let reward_received = false;

            function addClick() {
            clicks = clicks + click_power;
                if(clicks >= 10 && reward_received == false) {
                    click_power = click_power + 1;
                    reward_received = true;
                }
                document.querySelector('.total-clicks').textContent = clicks;
            }
        </script>
    </body>
</html>

\$\endgroup\$
0

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .