jQuery wird eine Schaltfläche nicht wieder aktivieren

Question

Ich habe ein einfaches Bingo-Spiel, das ich mit jQuery 1.12 schreibe und teilweise deaktiviere ich eine "Get New Card" -Schaltfläche (<button id="new_card">Get a New Card</button>) mit der folgende Codezeile:

$('#new_card').attr('disabled', 'disabled');

Dies funktioniert in allen gängigen Browsern habe ich installiert (IE11, Rand, FF48 und Chrome52 - alle unter Windows 10, 64 Bit), wie erwartet. Wenn jedoch ein Bingo erkannt wird, schlägt der Teil des Skripts fehl, der diese Schaltfläche wieder aktivieren sollte. Ich habe die folgenden Codezeilen verwendet, um zu versuchen, die Taste zu aktivieren:

  $('#new_card').attr('disabled', false); 
      $('#new_card').removeAttr('disabled'); 
      $('#new_card').prop('disabled', false); 

In jedem der großen oben aufgeführten Browser, alle diese Methoden versagen die Schaltfläche aktivieren. Ich habe console.log() Anweisungen sowohl vor als auch nach diesen Codezeilen, und sie geben an die Konsole aus, so dass ich weiß, dass sie ausgeführt werden. Es werden auch keine Fehler angezeigt. Seltsamerweise, wenn ich irgendeine dieser Codezeilen in die JS-Konsole eingebe, funktionieren alle drei in allen Browsern, auf die ich auf die Konsole zugreifen kann. Sie funktionieren nur zur Laufzeit nicht. Der vollständige Kontext des Codes ist unten:

 function newGame() { 
      clearInterval(ballTimer); 
      bingoCount = 0; 
      ballCount = 0; 
      selected = []; 
      var name = ''; 
      if ($('#cbNewCard').is(':checked')) newCard(); 
      ballTimer = setInterval(callBall, 5000); 
      gameInProgress = true; 
      $('#new_card').attr('disabled', 'disabled'); 
     } 

     function stopGame() { 
      gameInProgress = false; 
      $('#new_card').attr('disabled', false); 
      $('#new_card').removeAttr('disabled'); 
      $('#new_card').prop('disabled', false); 
      clearInterval(ballTimer); 
     } 

     function callBall(){ 
      var num = false; 
      do { 
       num = getRand(1,75); 
       var name = getBall(num); 
       console.log(selected.length); 
       if (selected.length >= 75) return false; 
      } while (findThis(num, selected)); 
      selected.push(num); 
      var newBall = $('<div>').addClass(name).html(name + num); 
      $('#called_numbers') 
       .append(newBall) 
       .animate({scrollTop: $('#called_numbers div:last-child').position().top}); 
      ballCount++; 
      $('#ballCount').text(ballCount); 
      check4bingos(); 
      if (bingoCount > 0) { 
       console.log('Got a BINGO!'); 
       stopGame(); 
       console.log('Got a BINGO!'); 
      } 
     } 

Alle Vorschläge würden geschätzt. Danke im Voraus.

Answer 1

Überprüfen Sie die Bereiche Ihres BingoCount.

Der Anfang des Skripts setzen Sie bingoCount als globale Variable auf 0

 var ballCount = 0; 
     var bingoCount = 0; 
     var ballTimer; 
     var gameInProgress = false; 
     var selected = []; 
     var inCard = []; 

dann in check4bingos() die Variable aufzuzählen versuchen Sie var bingoCount machen den Umfang lokal.

lokale vs globales Beispiel: https://jsfiddle.net/33y55tpa/

Ändern Sie den Umfang in check4bingos durch die var von bingoCount entfernen. Dann sollte deine Bedingung, wann ich stopGame() von CallBall anwenden soll, ab was ich deinen globalen Umfang sagen kann BingoCount wird immer 0 sein.

Du läufst auch clearInterval für ballTimer() sobald der lokale Bereich bingoCount> 0 so der Die Logik von BingoCount> 0 {stopGame()} wird niemals als das Intervall ausgeführt, in dem diese Logik zuvor entfernt wurde.

 if (bingoCount > 0) { 
      console.log('Got a BINGO!'); 
      clearInterval(ballTimer); 
     }