1

Подскажите как сделать так чтобы кнопка срабатывала 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";
    }
}
1
  • Добавить в атрибуты функции entry, чтобы получить так: const advancesOne = (entry) => ..., и добавить в начало функции эту строчку: clicks >= 100 ? entry.preventDefault() : null. Этот способ подойдёт если advancesOne выполняется на каждый клик.
    – ΝNL993
    13 сен 2022 в 19:56

1 ответ 1

0

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

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, т.е. запрещаем нажимать на кнопку с бонусом.

1
  • Разобрался, спасибо большое за помощь 13 сен 2022 в 20:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.