Проверьте, нажата ли кнопка с помощью оператора if в JS
Я пытаюсь создать простую игру-кликер, пытаюсь реализовать систему обновлений, но хочу, чтобы обновление прекращало генерироваться, когда я нажимаю кнопку сброса. Есть идеи, как я могу это сделать?
const btnElement = document.getElementById("btn");
const btnElement1 = document.getElementById("btn1");
const btnElement2 = document.getElementById("btn2");
const spnElement = document.getElementById("span");
let score = 1;
btnElement2.addEventListener("click", () => {
if (score < 10) {
console.info("poor");
} else if (score >= 10) {
var interval = setInterval(increment, 1000);
function increment() {
score = score % 360 + 1;
spnElement.innerText = score;
}
}
})
btnElement.addEventListener("click", () => {
spnElement.innerText = score++;
})
btnElement1.addEventListener("click", () => {
spnElement.innerText = 0;
score = 1;
})
document.body.addEventListener("keyup", function(event) {
if (event.code === "Space") {
spnElement.innerText = score++;
}
})
document.body.addEventListener("keydown", function(event) {
if (event.code === "Space") {
spnElement.innerText = score;
}
})
document.body.addEventListener("keydown", function(event) {
if (event.code === "Enter") {
spnElement.innerText = 0;
score = 1;
}
})body {
background-color: lightblue;
color: #333;
font-family: Arial, Helvetica, sans-serif;
}
#header {
background-color: lightcyan;
position: absolute;
right: 0;
top: 0px;
margin: 0px;
border-width: 2px;
border-bottom-width: 2px;
border-bottom-color: whitesmoke;
border-bottom-style: solid;
width: 100.09%;
}
#btns {
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
.btns {
background-color: lavender;
color: #333;
border-width: 1px;
border-color: palegreen;
border-radius: 5px;
}
.btns:hover {
background-color: mediumpurple;
}
#text {
text-align: center;
}<div id = "header">
<div id = "text">
<h1>Clicker</h1>
<h2><span id = "span">0</span></h2>
</div>
<div id = "btns">
<button id = "btn" class = "btns">+</button>
<button id = "btn1" class = "btns">Reset</button>
<button id = "btn2" class = "btns">Skibidi 1 (10 clicks)</button>
</div>
</div>Это была моя попытка использовать все, что я смог найти в Интернете.
Я добавил этот оператор if, чтобы посмотреть, будет ли он работать, мне просто было интересно, есть ли способ проверить, была ли нажата кнопка или нет в операторе if.
if (btnElement1.addEventListener("click", (any))){
return;
}
@RaviYadav, можешь ли ты привести мне пример? Я раньше не слышал об обратном вызове прослушивателя событий.
конечно, позвольте мне добавить это как ответ, чтобы объяснить.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете использовать обратный вызов прослушивателя событий.
btnElement1.addEventListener("click", callbackFn);
Когда вы используете addEventListener на btnElement1 и подписываетесь на событие click, оно будет вызывать предоставленный callbackFn всякий раз, когда кто-то нажимает btnElement1.
Итак, вы можете реализовать свою логику внутри callbackFn, которую планировали написать внутри if оператора.
Например, используя функцию стрелки в качестве обратного вызова, который получает объект события, содержащий информацию об элементе, где был выполнен щелчок:
btnElement1.addEventListener("click", (event) => {
//write your logic here
});
Если вам нужно остановить увеличение счета при сбросе, вы можете использовать clearTimeout. Вам нужно объявить переменную таймера вверху и использовать ее при нажатии btnElement1, чтобы очистить таймер.
const btnElement = document.getElementById("btn");
const btnElement1 = document.getElementById("btn1");
const btnElement2 = document.getElementById("btn2");
const spnElement = document.getElementById("span");
let score = 1;
let intervalTimer;
btnElement2.addEventListener("click", () => {
if (score < 10){
console.info("poor");
}
else if (score >= 10){
intervalTimer = setInterval( increment, 1000);
function increment(){
score = score % 360 + 1;
spnElement.innerText = score;
}
}
})
btnElement1.addEventListener("click", () => {
spnElement.innerText = 0;
score = 1;
// clear the timer
clearTimeout(intervalTimer)
})
Итак, для этого примера я бы добавил возврат к функции с именем callbackFn.
Он ничего не возвращает. Если вам нужно использовать его в операторе if, вы можете использовать переменную флага и обновить внутренний обратный вызов.
Я попробовал этот подход, но забыл упомянуть, что моя цель — завершить функцию, чтобы остановить самостоятельный прирост счета, и он не останавливается. Как я могу использовать это и оператор return одновременно?
Понятно, я обновил свой ответ, посмотрите.
Большой! Пожалуйста, отметьте это как принятый ответ, чтобы помочь другим с подобной проблемой.
почему бы вам не использовать обратный вызов прослушивателя событий?