Как остановить функцию onclick, когда время истекло?

Question

Как мне отменить мою функцию onclick answer1 (), когда таймер становится равным 0?

Я пытался остановить его с помощью setTimeout, но это зависит от события onclick.

<script>        
    function answer1(){
        var answr = document.getElementById("answer1");
        var btn = document.getElementById("confirm1");
        var AlertZone = document.getElementById("alert1");
        var page = document.getElementById("taskTwo");
        var time = document.getElementById("timer");

        if (answr.value == 336){
            btn.style.background = "#4ce600";
            btn.style.borderColor = "#aaff80";
            AlertZone.innerHTML = "Correct!";
            AlertZone.style.color = "green";
            page.style.display = "block";
            }
        else
            {
                AlertZone.innerHTML = "Wrong answer!"
                AlertZone.style.color = "red";
                btn.style.background = "red";
                btn.style.borderColor = "#ffa0a0";
                page.style.display = "none";
            }
    }
        var timeleft = 10;
        var time = document.getElementById("timer");
        var btn = document.getElementById("confirm1");
        var timer = setInterval(function(){
        timeleft--;
        document.getElementById("timer").textContent = timeleft;
        if(timeleft <= 0)
            clearInterval(timer);
        if(time.innerHTML == 0){
            btn.style.background ='grey';
            btn.style.borderColor ='#aaa';
            btn.innerHTML ="You lost!";
            }
        },1000);
        </script>

Мне нужна функция answer1 (), которая нажимает, чтобы перестать работать, когда таймер становится равным 0, поэтому я не смогу щелкнуть по нему.

Answer 1

Yout может отключить кнопку через 3 секунды, включив ниже код javascript в вашу функцию.Если кнопка # button1:

Javascript:

<script>
  let button = document.getElementById("button1");
  setTimeout(() => {
    button.disabled = true;
  }, 3000);
</script>

Answer 2

Вместо встроенного обработчика событий вы можете использовать .addEventListener () и .removeEventListener () для установки и удаления обработчика событий:

function answer1() {
    console.log('ok');
}
// on dom ready
document.addEventListener('DOMContentLoaded', function(e) {
    // set click handler
    document.getElementById('btn').addEventListener('click', answer1);

    document.getElementById('rmclick').addEventListener('click', function(e) {
        // remove handler
        document.getElementById('btn').removeEventListener('click', answer1);
    });
})

<button id="btn">Click Me</button>
<button id="rmclick">Remove oclick handler</button>

Answer 3

Установите нажатие кнопки на ноль, когда таймер истекает, должно работать.

<script>        
function answer1(){
    var answr = document.getElementById("answer1");
    var btn = document.getElementById("confirm1");
    var AlertZone = document.getElementById("alert1");
    var page = document.getElementById("taskTwo");
    var time = document.getElementById("timer");

    if (answr.value == 336){
        btn.style.background = "#4ce600";
        btn.style.borderColor = "#aaff80";
        AlertZone.innerHTML = "Correct!";
        AlertZone.style.color = "green";
        page.style.display = "block";
        }
    else
        {
            AlertZone.innerHTML = "Wrong answer!"
            AlertZone.style.color = "red";
            btn.style.background = "red";
            btn.style.borderColor = "#ffa0a0";
            page.style.display = "none";
        }
}
    var timeleft = 10;
    var time = document.getElementById("timer");
    var btn = document.getElementById("confirm1");
    var timer = setInterval(function(){
    timeleft--;
    document.getElementById("timer").textContent = timeleft;
    if(timeleft <= 0)
        clearInterval(timer);
    if(time.innerHTML == 0){
        btn.style.background ='grey';
        btn.style.borderColor ='#aaa';
        btn.innerHTML ="You lost!";
        btn.onclick = null;
        }
    },1000);
    </script>

Answer 4

Добавьте условие в функцию ответа, чтобы проверить, может ли ответ быть принят или нет.

const but = document.getElementById("answer");
const tim = document.getElementById("timeLeft");

but.addEventListener("click", answer);

function answer(){
  if(canAnswer){
    console.log("Answer accepted");
  } else {
    console.log("Answer denied");
  }
}

let canAnswer = true;
const timer = 10 * 1000; 
const end = Date.now() + timer;
const si = setInterval(function(){
  const timeLeft = Math.max(0, end - Date.now());
  tim.innerText = Math.floor(timeLeft/1000);
  if(timeLeft === 0){
    clearInterval(si);
    canAnswer = false;
    return;
  }
}, 200);

<p id="timeLeft"></p>
<button id="answer">Answer</button>

Answer 5

Вот простой пример использования setTimeout и флага:

let timerExpired = false

function answer() {
  if (timerExpired) return
    
  console.log('answer!')
  
  setTimeout(() => {
    timerExpired = true
  }, 1000)
}

<button onclick="answer()">Click me</button>

А еще лучше, просто отключите саму кнопку:

function answer(button) {    
  console.log('answer!')

  setTimeout(() => {
    button.setAttribute('disabled', true)
  }, 1000)
}

<button onclick="answer(this)">Click Me</button>