В коде оставил комментарии, надеюсь разберётесь.
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
, т.е. запрещаем нажимать на кнопку с бонусом.
entry
, чтобы получить так:const advancesOne = (entry) => ...
, и добавить в начало функции эту строчку:clicks >= 100 ? entry.preventDefault() : null
. Этот способ подойдёт еслиadvancesOne
выполняется на каждый клик.