1
votes

Comment arrêter ma fonction onclick lorsque le temps est écoulé?

Comment puis-je annuler ma fonction onclick answer1 (), lorsque le minuteur passe à 0?

J'ai essayé de l'arrêter en utilisant setTimeout, mais cela dépend de l'événement onclick.

/ p>

<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>

J'ai besoin de la fonction answer1 (), qui est sur clic pour arrêter de fonctionner, lorsque le minuteur passe à 0, donc je ne pourrai pas cliquer dessus.

javascript function

2 commentaires

Soit supprimer l'écouteur d'événements ( stackoverflow.com/questions/10444077/… < / a>) ou ajoutez simplement une instruction return dans votre fonction answer1 () lorsque timeleft est inférieur ou égal à 0.

vous pouvez arrêter la fonction en utilisant return comme ceci if (timeleft <= 0) return;

5 Réponses :

1
votes

Voici un exemple simple utilisant setTimeout et un indicateur:

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

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

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

Ou mieux encore, désactiver le bouton lui-même:

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

let timerExpired = false

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

0 commentaires

0
votes

Réglez le clic du bouton sur null lorsque le minuteur est épuisé devrait fonctionner.

<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>

0 commentaires

0
votes

Ajoutez une condition dans votre fonction de réponse pour vérifier si la réponse peut être acceptée ou non.

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

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);

0 commentaires

0
votes

Au lieu du gestionnaire d'événements en ligne, vous pouvez utiliser .addEventListener ( ) et .removeEventListener () pour définir et supprimer un gestionnaire d'événements:

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

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);
    });
})

0 commentaires

0
votes

Vous pouvez désactiver le bouton après 3 secondes, en incluant le code javascript ci-dessous dans votre fonction. Si le bouton est # button1:

Javascript:

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

0 commentaires