Question

这是针对已经评分过的班级的简短游戏。我无法通过on.click事件（JQuery）获得winOrLose（）函数来执行给定参数。我是编程新手，真的想了解自己在做错什么，这使它无法正常工作。任何帮助将不胜感激。

我没有收到错误消息。一旦满足了获胜或失败的条件（超过或满足分配的randomNum），该功能将不会执行。

$(document).ready(function() {



  // ================Variables ============================

  var randomNum = 0;
  var totalScore = 0;
  var wins = 0;
  var losses = 0;
  var button1 = getRandomInt(1, 12);
  var button2 = getRandomInt(1, 12);
  var button3 = getRandomInt(1, 12);
  var button4 = getRandomInt(1, 12);

  function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
  };

  // ================ Functions =========================



  // Get Random Number and Assign to random-number-target
  randomNum = $("#random-number-target").text(getRandomInt(19, 120));


  function winOrLose() {
    if (totalScore > randomNum) {
      console.log("you lose!");
      losses++;
      $("#losses-target").text(losses);
      // totalScore = 0;
      resetGame();
    } else if (totalScore === randomNum) {
      // end game if Total Score == Random (You Win message) and update wins div
      console.log("you win!");
      wins++;
      $("#wins-target").text(wins);
      // totalScore = 0;
      resetGame();
    };
  };

  function resetGame() {
    randomNum = $("#random-number-target").text(getRandomInt(19, 120));
    totalScore = 0;
    button1 = getRandomInt(1, 12);
    button2 = getRandomInt(1, 12);
    button3 = getRandomInt(1, 12);
    button4 = getRandomInt(1, 12);
  };


  // Button #1 Click id="img01" - add value of random number to id totalScoreTarget
  function startGame() {

    $("#img01").on("click", function() {
      totalScore += button1;
      $("#totalScoreTarget").text(totalScore);
      winOrLose();
    });

    // Button #2 Click id="img01" - add value of random number to id totalScoreTarget
    $("#img02").on("click", function() {
      totalScore += button2;
      $("#totalScoreTarget").text(totalScore);
      winOrLose();
    });

    // Button #3 Click id="img01" - add value of random number to id totalScoreTarget
    $("#img03").on("click", function() {
      totalScore += button3;
      $("#totalScoreTarget").text(totalScore);
      winOrLose();
    });

    // Button #4 Click id="img01" - add value of random number to id totalScoreTarget
    $("#img04").on("click", function() {
      totalScore += button4;
      $("#totalScoreTarget").text(totalScore);
      winOrLose();
    });
  };

  $(document).on("click", startGame());

});

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="header">
  <h1><img src="assets/images/crystalHead.jpg" id="imgHead" alt="Crystal Collector"></h1>
</div>

<div class="instructions">
  <p>You will be given a random number at the start of the game </p>
  <p>There are four crystal pictures shown and each contains a hidden value</p>
  <p>You win the game by matching the given number exactly</p>
  <p></p>

</div>

<div>Number to Match:</div>
<div id="random-number-target"> </div>

<div id="scoreboard">
  <br> Wins:
  <p id="wins-target"></p>
  Losses:
  <p id="losses-target"></p>
</div>



<div class="crystal-pics" id="pic1" value=0><img src="assets/images/crystal01.jpg" id="img01" onclick=></div>
<!-- <input type="image"  id="img01" src="assets/images/crystal01.jpg" alt="click"> -->
<div class="crystal-pics" id="pic1" value=0><img src="assets/images/crystal02.jpg" id="img02"></div>
<div class="crystal-pics" id="pic1" value=0><img src="assets/images/crystal03.jpg" id="img03"></div>
<div class="crystal-pics" id="pic1" value=0><img src="assets/images/crystal04.jpg" id="img04"></div>

<div>Total Score: </p>
</div>
<div class="total-score-title"></div>

<div class="total-score"><span id="totalScoreTarget"> </span>

</div>

Answer 1

正在调用函数winOrLose()，只需在开头添加一个console.log，您就会看到它...

您的问题出在randomNum变量上，您要为它分配一个jQuery对象而不是整数...为它分配getRandomInt()函数的返回值，然后在{ text()中的{1}}。如果仅一行执行此操作，则变量将保存元素，而不保存数字，因此#random-number-target或totalScore > randomNum将永远不会得出true。

totalScore === randomNum

$(document).ready(function() {
  // ================Variables ============================

  var randomNum = 0;
  var totalScore = 0;
  var wins = 0;
  var losses = 0;
  var button1 = getRandomInt(1, 12);
  var button2 = getRandomInt(1, 12);
  var button3 = getRandomInt(1, 12);
  var button4 = getRandomInt(1, 12);

  function getRandomInt(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
  };

  // ================ Functions =========================

  // Get Random Number and Assign to random-number-target
  randomNum = getRandomInt(19, 120)
  $("#random-number-target").text(randomNum);


  function winOrLose() {
    console.clear()
    console.log("winOrLose Called", totalScore, randomNum)
    if (totalScore > randomNum) {
      console.log("you lose!");
      losses++;
      $("#losses-target").text(losses);
      // totalScore = 0;
      resetGame();
    } else if (totalScore === randomNum) {
      // end game if Total Score == Random (You Win message) and update wins div
      console.log("you win!");
      wins++;
      $("#wins-target").text(wins);
      // totalScore = 0;
      resetGame();
    };
  };

  function resetGame() {
    randomNum = $("#random-number-target").text(getRandomInt(19, 120));
    totalScore = 0;
    button1 = getRandomInt(1, 12);
    button2 = getRandomInt(1, 12);
    button3 = getRandomInt(1, 12);
    button4 = getRandomInt(1, 12);
  };


  // Button #1 Click id="img01" - add value of random number to id totalScoreTarget
  function startGame() {

    $("#img01").on("click", function() {
      totalScore += button1;
      $("#totalScoreTarget").text(totalScore);
      winOrLose();
    });

    // Button #2 Click id="img01" - add value of random number to id totalScoreTarget
    $("#img02").on("click", function() {
      totalScore += button2;
      $("#totalScoreTarget").text(totalScore);
      winOrLose();
    });

    // Button #3 Click id="img01" - add value of random number to id totalScoreTarget
    $("#img03").on("click", function() {
      totalScore += button3;
      $("#totalScoreTarget").text(totalScore);
      winOrLose();
    });

    // Button #4 Click id="img01" - add value of random number to id totalScoreTarget
    $("#img04").on("click", function() {
      totalScore += button4;
      $("#totalScoreTarget").text(totalScore);
      winOrLose();
    });
  };

  startGame();
});

无法从其他函数调用函数的问题

1 个答案: