Условие срабатывания кнопки JS

Question

Подскажите как сделать так чтобы кнопка срабатывала 1 раз.

У меня есть кнопка которая срабатывает когда Пользователь совершить 100 Кликов. За это ему начисляется награда виде 200 Кликов на баланс. Так же в отдельную переменную пользователи начисляется значение 200. Мне нужно после того как пользователь нажмет на кнопку данная кнопка больше не срабатывала.

Я читал что то за условия, но по пробовал варианты у меня либо Нечего не начисляет либо все равно идет начисления.

const advancesOne = () => {
    
    if (clicks >= 100) {
        advances_bl += 200;
        clicks += 200;
        document.getElementById('clicks-count').innerText = clicks;
    }

    let advancesButton = document.getElementById("advances_one_s");
    if (advances_bl <= 200) {
        advancesButton.style.opacity  = "0.4";
    }
}

Answer 1

В коде оставил комментарии, надеюсь разберётесь.

const result = document.querySelector('#res');
const click = document.querySelector('#click');
const bonus = document.querySelector('#bonus');
const bonusHelper = document.querySelector('#bonus-helper');

const needClicksForBonus = 20; // Запишем в переменную значение при котором разблокируется кнопка
let bonusReceived = false; // Это флаг для того, чтобы "код" знал, что мы выдали награду.

let clickCount = 0; // Счётчик кликов

bonusHelper.textContent = bonusHelper.textContent.replace(/%n/g, needClicksForBonus);

click.addEventListener('click', function() { // При клике на кнопку, что засчитывает клики
  result.textContent = ++clickCount; // увеличиваем количество кликов и сразу выводим их в результат
  
  if(clickCount >= needClicksForBonus && bonusReceived === false) { // А тут проверяем, есть ли у пользователя достаточно кликов И что он не получал ещё награду. Если условие совпадает, то..
    bonus.disabled = false; // .. разблокируем кнопку с бонусом
    bonusHelper.textContent = 'Вы можете получить бонус +200 кликов';
    console.info('t');
  }
});

bonus.addEventListener('click', function() { // при нажатии на кнопку с бонусом
  if(clickCount >= needClicksForBonus && bonusReceived === false) { // Так же проверяем, достаточно ли кликов И бонус не был получен, и если совпадает, то ..
    result.textContent = clickCount += 200; // Прибовляем бонус к счёту
    bonus.disabled = bonusReceived = true; // блокируем кнопку и меняем флаг, что бонус уже получен.
    bonusHelper.textContent = 'Бонус получен';
    setTimeout(function() {
      bonusHelper.remove();
    }, 2000);
  }
});

<div id="res">0</div>
<button id="click">CLICK</button> <button id="bonus" disabled>BONUS +200</button>
<p id="bonus-helper">Бонус будет доступен при наличии %n кликов</p>

Если на словах, то в идеале не только проверять можем ли выдать бонус, но и был ли получен бонус, для этого проще всего завести отдельную переменную "флаг", которая будет иметь значение false - если не получен и true - если получен.

Далее при каждом клике проверять, наличие нужной суммы И состояние флага.
Если счёт больше нужной суммы и флаг равен false, то меняем состояние кнопки на button.disabled = false, т.е. делаем её доступной для нажатия.

А при нажатии на кнопку с бонусом, выдаём бонус, меняем флаг на false, button.disabled = true, т.е. запрещаем нажимать на кнопку с бонусом.

БЛОГ НА HUSL

Условие срабатывания кнопки JS

Ответы (1 шт):