Numbers aren't being recognized and conditional statement isn't doing anything

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

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>

Answer 2

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