How to disable a button even on refresh using JavaScript?-CodePudding

I have been trying to make a reward system where a user can login daily to receive rewards but if I click on the "Claim daily Reward", the button get's disabled which is fine but if I refresh the page, the button gets enabled.

This is the code

const btn = document.querySelectorAll("#primary");

for (let i = 0; i < berries.length; i  ) { 
  btn[i].addEventListener('click', () => {
    btn.disabled = true
  })
}

.berrycontainer {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.berry {
    background: rgba(157, 236, 38, 0.938);
    border-radius: 0.4rem;
    margin-left: 2rem;
    margin-top: 2rem;
}

<main style="text-align: center;">
            <div >
                <div >
                    <h1 >20 berries</h1>
                    <p >Day 1</p>
                    <button type="button"  id="primary" data-bs-toggle="modal"
                data-bs-target="#staticBackdrop">Claim Daily reward <i 
                    style="display: none;"></i></button>
                </div>
                <div >
                    <h1 >20 berries</h1>
                    <p >Day 1</p>
                    <button type="button"  id="primary" data-bs-toggle="modal"
                data-bs-target="#staticBackdrop">Claim Daily reward <i 
                    style="display: none;"></i></button>
                </div>
                <div >
                    <h1 >20 berries</h1>
                    <p >Day 1</p>
                    <button type="button"  id="primary" data-bs-toggle="modal"
                data-bs-target="#staticBackdrop">Claim Daily reward <i 
                    style="display: none;"></i></button>
                </div>
            </div>
            </main>

CodePudding user response：

use HTML. add disabled attribute to disable it by default. further down when needed you can remove this attribute with javascript and enable it.

 <button type="button"  id="primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop" disabled>

CodePudding user response：

Since you already have a user, who is "logging in" somewhere, save the state of that reward/rewards in the place where you verify that login, I assume it is some database. Reset the state of "claimed" rewards on a daily basis there.