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

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>

这个游戏的主意是点击4张图片。页面加载时，将为每个图像分配一个随机数，同时还会显示targetNumber。这些数字将在var counter = 0中加在一起；如果超过targetNumber则输，如果匹配则赢。

有人可以告诉我为什么这行不通吗？当计数器与targetNumber匹配时，我使用了条件语句来提醒（“ YOU WIN”），但显然无法识别这些值。

Answer 1

您只检查玩家是否在游戏开始时获胜，而不是单击其中一个字符时。取而代之的是，您希望将获胜逻辑放入一个函数中，然后在每个点击处理程序中调用该函数。

类似的东西：

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

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

Answer 2

此刻，您的

if (counter === targetNumber) {

测试仅在页面加载上运行 -看看它在顶层如何运行？您需要对其进行更改，以便每次单击字符时都检查计数器。您可以通过在#images-container上放置一个侦听器来实现此目的，该侦听器将在处理了正确的字符单击事件（和计数器增量）后运行 ：

$('#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>

您还可以通过单击字符图标时仅使用一个单个处理程序，而不是四个单独的处理程序，来减少代码的重复性：

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>