无法识别数字，条件语句也无济于事

Question

 var wins = 0; var losses = 0; // This variable will store the target number to match var targetNumber; // This variable will store the numbers added together var counter = 0; // Display counter, wins & losses $("#target-score").text("Current score: " + counter); $("#wins").text("Wins: " + wins); $("#losses").text("Losses: " + losses); // Step 1 // Assign each character image a variable. Add each variable to the empty array var char1 = getRandomNumber(); var char2 = getRandomNumber(); var char3 = getRandomNumber(); var char4 = getRandomNumber(); // Step 2 // Create a function that gives a random number between 1 - 12 and adds it the arrays elements function getRandomNumber() { var randomNumber = Math.floor(Math.random() * 12) + 1; console.log("Random number between 1 & 12 is: " + randomNumber); return randomNumber; }; // Step 3 // Create click functions and link the random number to each image $("#character1").click(function() { counter += char1; $("#target-score").text("Current score: " + counter); }); $("#character2").click(function() { counter += char2; $("#target-score").text("Current score: " + counter); }); $("#character3").click(function() { counter += char3; $("#target-score").text("Current score: " + counter); }); $("#character4").click(function() { counter += char4; $("#target-score").text("Current score: " + counter); }); if (counter === targetNumber) { alert("YOU WIN"); } // Step 4 // Create a random target number between 19 - 120 var createTarget = Math.floor(Math.random() * 100) + 19; targetNumber = +createTarget; console.log(targetNumber); // Display the random number $("#total-score").text("Target number is: " + targetNumber); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="game-container"> <h1>Battle!</h1> <div id="instructions"> <p>You will be given a random number at the start of the game.</p> <p>There are four characters below. By clicking on a character you will add a specific amount of points to your total score.</p> <p>You win the game by matching your total score to the random number, you lose the game if your total score goes above the random number.</p> <p>The value of each crystal is hidden from you until you click on it.</p> <p>Everytime the game restarts, the game will change the values of each character.</p> </div> <div id="counters"> <div id="total-score"></div> <div id="target-score"></div> </div> <div id="images-container"> <img src="assets/images/Aragorn.jpeg" alt="Aragorn" class="LOTR-characters" id="character1"> <img src="assets/images/Legolas.jpeg" alt="Legolas" class="LOTR-characters" id="character2"> <img src="assets/images/Gimley.jpeg" alt="Gimley" class="LOTR-characters" id="character3"> <img src="assets/images/Gandalf.jpeg" alt="Gandalf" class="LOTR-characters" id="character4"> </div> <div id="wins-losses"> <div id="wins"></div> <div id="losses"></div> </div> </div> 

The idea of this game is to click on 4 images. Each image will be assigned a random number when the page loads, a targetNumber will also be displayed. The numbers will be added together in var counter = 0; If you go over the targetNumber then you lose, if you match it you win.

Can anyone tell me why this doesn't work? I used a conditional statement to alert("YOU WIN") when the counter matches the targetNumber but it obviously doesn't recognize the values.

Answer 1

You're only checking if the player has won at the start of the game, not when clicking one of the characters. Instead, you'll want to pull your winning logic into a function that you then call in each click handler.

Something like:

$("#character4").click(function() {
    counter += char4;
    $("#target-score").text("Current score: " + counter);
    checkWinner();
});

function checkWinner() {
    if (counter === targetNumber) {
        alert("YOU WIN");
    }
}

Answer 2

At the moment, your

if (counter === targetNumber) {

test runs only on pageload - see how it's on the top level? You need to change it so that the counter is checked every time a character is clicked. You might implement this by putting a listener on the #images-container , which will run after the proper character-click event (and counter increment) has been handled:

$('#images-container').on('click', checkCounter);

function checkCounter() {
  if (counter === targetNumber) {
    console.log("YOU WIN");
  } else if (counter > targetNumber) {
    console.log("you lose");
  }
}

 var wins = 0; var losses = 0; // This variable will store the target number to match var targetNumber; // This variable will store the numbers added together var counter = 0; // Display counter, wins & losses $("#target-score").text("Current score: " + counter); $("#wins").text("Wins: " + wins); $("#losses").text("Losses: " + losses); // Step 1 // Assign each character image a variable. Add each variable to the empty array var char1 = getRandomNumber(); var char2 = getRandomNumber(); var char3 = getRandomNumber(); var char4 = getRandomNumber(); // Step 2 // Create a function that gives a random number between 1 - 12 and adds it the arrays elements function getRandomNumber() { var randomNumber = Math.floor(Math.random() * 12) + 1; console.log("Random number between 1 & 12 is: " + randomNumber); return randomNumber; }; // Step 3 // Create click functions and link the random number to each image $("#character1").click(function() { counter += char1; $("#target-score").text("Current score: " + counter); }); $("#character2").click(function() { counter += char2; $("#target-score").text("Current score: " + counter); }); $("#character3").click(function() { counter += char3; $("#target-score").text("Current score: " + counter); }); $("#character4").click(function() { counter += char4; $("#target-score").text("Current score: " + counter); }); $('#images-container').on('click', checkCounter); function checkCounter() { if (counter === targetNumber) { console.log("YOU WIN"); } else if (counter > targetNumber) { console.log("you lose"); } } // Step 4 // Create a random target number between 19 - 120 var createTarget = Math.floor(Math.random() * 100) + 19; targetNumber = +createTarget; console.log(targetNumber); // Display the random number $("#total-score").text("Target number is: " + targetNumber); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="game-container"> <h1>Battle!</h1> <div id="instructions"> <p>You will be given a random number at the start of the game.</p> <p>There are four characters below. By clicking on a character you will add a specific amount of points to your total score.</p> <p>You win the game by matching your total score to the random number, you lose the game if your total score goes above the random number.</p> <p>The value of each crystal is hidden from you until you click on it.</p> <p>Everytime the game restarts, the game will change the values of each character.</p> </div> <div id="counters"> <div id="total-score"></div> <div id="target-score"></div> </div> <div id="images-container"> <img src="assets/images/Aragorn.jpeg" alt="Aragorn" class="LOTR-characters" id="character1"> <img src="assets/images/Legolas.jpeg" alt="Legolas" class="LOTR-characters" id="character2"> <img src="assets/images/Gimley.jpeg" alt="Gimley" class="LOTR-characters" id="character3"> <img src="assets/images/Gandalf.jpeg" alt="Gandalf" class="LOTR-characters" id="character4"> </div> <div id="wins-losses"> <div id="wins"></div> <div id="losses"></div> </div> </div> 

You can also make your code much less repetitive by using only a single handler when a character icon is clicked, rather than four separate handlers:

 var wins = 0; var losses = 0; // This variable will store the target number to match var targetNumber; // This variable will store the numbers added together var counter = 0; // Display counter, wins & losses $("#target-score").text("Current score: " + counter); $("#wins").text("Wins: " + wins); $("#losses").text("Losses: " + losses); // Step 1 // Assign each character image a variable. Add each variable to the empty array const charValues = Array.from({ length: 4 }, getRandomNumber); // Step 2 // Create a function that gives a random number between 1 - 12 and adds it the arrays elements function getRandomNumber() { var randomNumber = Math.floor(Math.random() * 12) + 1; console.log("Random number between 1 & 12 is: " + randomNumber); return randomNumber; }; // Step 3 // Create click functions and link the random number to each image $('#images-container').on('click', checkCounter); const imgs = [...document.querySelectorAll('.LOTR-characters')]; function checkCounter({ target }) { if (!target.matches('img')) return; counter += charValues[imgs.indexOf(target)]; $("#target-score").text("Current score: " + counter); if (counter === targetNumber) { console.log("YOU WIN"); } else if (counter > targetNumber) { console.log("you lose"); } } // Step 4 // Create a random target number between 19 - 120 var createTarget = Math.floor(Math.random() * 100) + 19; targetNumber = +createTarget; console.log(targetNumber); // Display the random number $("#total-score").text("Target number is: " + targetNumber); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="game-container"> <h1>Battle!</h1> <div id="instructions"> <p>You will be given a random number at the start of the game.</p> <p>There are four characters below. By clicking on a character you will add a specific amount of points to your total score.</p> <p>You win the game by matching your total score to the random number, you lose the game if your total score goes above the random number.</p> <p>The value of each crystal is hidden from you until you click on it.</p> <p>Everytime the game restarts, the game will change the values of each character.</p> </div> <div id="counters"> <div id="total-score"></div> <div id="target-score"></div> </div> <div id="images-container"> <img src="assets/images/Aragorn.jpeg" alt="Aragorn" class="LOTR-characters" id="character1"> <img src="assets/images/Legolas.jpeg" alt="Legolas" class="LOTR-characters" id="character2"> <img src="assets/images/Gimley.jpeg" alt="Gimley" class="LOTR-characters" id="character3"> <img src="assets/images/Gandalf.jpeg" alt="Gandalf" class="LOTR-characters" id="character4"> </div> <div id="wins-losses"> <div id="wins"></div> <div id="losses"></div> </div> </div>