CODEWITHSUNDEEP
javascript
Oise
Oise

Reputation: 1

How to disable a button event on refresh using JavaScript?

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 class="berrycontainer">
    <div class="berry">
      <h1 class="berryh">20 berries</h1>
      <p class="day-paragraph">Day 1</p>
      <button type="button" class="btn btn-primary" id="primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">Claim Daily reward <i class="bi bi-clock-fill clock"
                    style="display: none;"></i></button>
    </div>
    <div class="berry">
      <h1 class="berryh">20 berries</h1>
      <p class="day-paragraph">Day 1</p>
      <button type="button" class="btn btn-primary" id="primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">Claim Daily reward <i class="bi bi-clock-fill clock"
                    style="display: none;"></i></button>
    </div>
    <div class="berry">
      <h1 class="berryh">20 berries</h1>
      <p class="day-paragraph">Day 1</p>
      <button type="button" class="btn btn-primary" id="primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">Claim Daily reward <i class="bi bi-clock-fill clock"
                    style="display: none;"></i></button>
    </div>
  </div>
</main>

Upvotes: 0

Views: 134

Answers (1)

Yavor
Yavor

Reputation: 39

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.

Upvotes: 1

Related Questions