Modification de l'étendue du programme Javascript global à la rupture locale

Question

Grâce à l'aide de vous, vous avez réparé mon petit jeu d'ajout RNG et l'avez fait fonctionner. Maintenant, à la suggestion d'un utilisateur, j'essaie de changer la portée du code du jeu additionnel de global à local avant de coder le prochain jeu; Je veux que chaque jeu soit complètement contenu dans sa propre portée, car je comprends que l'apprentissage de ne pas contaminer inconsidérément la portée mondiale est une bonne idée. Cependant, je suis un peu coincé sur la façon d'y parvenir.

Voici le code pour le jeu d'addition actuellement fonctionnelle:

function beginAdditionChallenge() { 
    var x = Math.ceil(Math.random()*100); 
    alert(x); 
    for (var i = 0; i < 3; i++) { 
     var a = Number(prompt("Provide the first addend.", "")); 
     var b = Number(prompt("Provide the second addend.", "")); 
     if (a + b === x) { 
      alert("Well done!"); 
      break; 
     } 
      else if (a + b !== x && i < 2) { 
      alert("Please try again."); 
     } 
     else { 
      alert("Derp."); 
     } 
    } 
} 

function initChallenge() { 
    var button = document.getElementById("challengeButton"); 
    button.addEventListener("click", beginAdditionChallenge); 
} 

window.addEventListener("load", initChallenge); 

Et voici ma tentative de l'envelopper, qui ne réussit qu'à briser le jeu, de sorte que le bouton ne répond même pas:

window.addEventListener("load", function() { 
    function beginAdditionChallenge() { 
     var x = Math.ceil(Math.random()*100); 
     alert(x); 
     for (var i = 0; i < 3; i++) { 
      var a = Number(prompt("Provide the first addend.", "")); 
      var b = Number(prompt("Provide the second addend.", "")); 
      if (a + b === x) { 
       alert("Well done!"); 
       break; 
      } 
       else if (a + b !== x && i < 2) { 
       alert("Please try again."); 
      } 
       else { 
       alert("Derp."); 
      } 
     } 
    } 

    function initChallenge() { 
     var button = document.getElementById("challengeButton"); 
     button.addEventListener("click", beginAdditionChallenge); 
    } 

    window.addEventListener("load", initChallenge); 
    }); 

Le code fonctionnel est disponible sur JSFiddle here.

Answer 1

Notez que l'option onLoad dans JSFiddle fait la même chose que votre deuxième extrait. Vous devez choisir l'une des options No wrap lorsque vous vous liez à 'load' vous-même.

Et, la question découle de tenter de se lier à 'load' dans un gestionnaire 'load':

window.addEventListener("load", function() { 
    // ... 

    window.addEventListener("load", initChallenge); 
}); 

Lorsque l'événement est déjà mise à feu et la manipulation de la liaison externe, il est trop tard pour ajouter d'autres gestionnaires à elle. Ils ne seront pas recyclés et l'événement ne devrait plus se reproduire.

Vous voulez, soit appeler initChallenge dans l'événement extérieur contraignant:

window.addEventListener("load", function() { 
    // ... 

    initChallenge(); 
}); 

Ou, vous pouvez utiliser un IIFE avec la liaison intérieure:

(function() { 
    // ... 

    window.addEventListener("load", initChallenge); 
})();