Trouble with function not being called from another function

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

This is a short game for class that has already been graded. I cannot get the winOrLose() function to execute given parameters from the on.click event (JQuery). I'm new to programming and really want to understand what I'm doing wrong that is keeping this from working. Any help would be appreciated.

I don't receive an error. Once the condition of a win or loss is met (exceeding or meeting the assigned randomNum), the function does not execute.

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

edited Nov 22 '18 at 10:30

connexo

23.2k93863

asked Nov 22 '18 at 10:15

Richard M

2

Can you post the HTML as well? Also, can you tell us what error you are receiving when you try to call the function?

– theapologist
Nov 22 '18 at 10:21

2

Possibly because $(document).on("click", startGame()); is restarting the game on every click.

– Andy G
Nov 22 '18 at 10:24

Andy, I tried wrapping the game in a function and calling the function at the end of my code, but that wasn't working either. I just tried commenting out the $(document).on("click", startGame()); and it stops working altogether. It doesn't reset the randomNum so I don't think the whole game is restarting, but will keep on experimenting around this.

– Richard M
Nov 22 '18 at 10:34

@AndyG that seems to be the problem. @Richard if you want to start the game when the dom is ready, it makes sense to just call the startGame() function without the document.on("click",...) part. Or if you want, you can always keep a start button and start the game after you click that. :-)

– theapologist
Nov 22 '18 at 10:34

@Lloyd and AndyG thank you. I just tried the startGame() function standalone and the winOrLose() function still isn't executing. I'm still digging into this and appreciate the feedback!

– Richard M
Nov 22 '18 at 10:40

add a comment |

I don't receive an error. Once the condition of a win or loss is met (exceeding or meeting the assigned randomNum), the function does not execute.

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

edited Nov 22 '18 at 10:30

connexo

23.2k93863

asked Nov 22 '18 at 10:15

Richard M

2

Can you post the HTML as well? Also, can you tell us what error you are receiving when you try to call the function?

– theapologist
Nov 22 '18 at 10:21

2

Possibly because $(document).on("click", startGame()); is restarting the game on every click.

– Andy G
Nov 22 '18 at 10:24

Andy, I tried wrapping the game in a function and calling the function at the end of my code, but that wasn't working either. I just tried commenting out the $(document).on("click", startGame()); and it stops working altogether. It doesn't reset the randomNum so I don't think the whole game is restarting, but will keep on experimenting around this.

– Richard M
Nov 22 '18 at 10:34

@AndyG that seems to be the problem. @Richard if you want to start the game when the dom is ready, it makes sense to just call the startGame() function without the document.on("click",...) part. Or if you want, you can always keep a start button and start the game after you click that. :-)

– theapologist
Nov 22 '18 at 10:34

@Lloyd and AndyG thank you. I just tried the startGame() function standalone and the winOrLose() function still isn't executing. I'm still digging into this and appreciate the feedback!

– Richard M
Nov 22 '18 at 10:40

add a comment |

I don't receive an error. Once the condition of a win or loss is met (exceeding or meeting the assigned randomNum), the function does not execute.

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

edited Nov 22 '18 at 10:30

connexo

23.2k93863

asked Nov 22 '18 at 10:15

Richard M

I don't receive an error. Once the condition of a win or loss is met (exceeding or meeting the assigned randomNum), the function does not execute.

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

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

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

javascript jquery

edited Nov 22 '18 at 10:30

connexo

23.2k93863

asked Nov 22 '18 at 10:15

Richard M

edited Nov 22 '18 at 10:30

connexo

23.2k93863

asked Nov 22 '18 at 10:15

Richard M

edited Nov 22 '18 at 10:30

connexo

23.2k93863

edited Nov 22 '18 at 10:30

connexo

23.2k93863

edited Nov 22 '18 at 10:30

connexo

23.2k93863

asked Nov 22 '18 at 10:15

Richard M

asked Nov 22 '18 at 10:15

Richard M

asked Nov 22 '18 at 10:15

Richard M

2

Can you post the HTML as well? Also, can you tell us what error you are receiving when you try to call the function?

– theapologist
Nov 22 '18 at 10:21

2

Possibly because $(document).on("click", startGame()); is restarting the game on every click.

– Andy G
Nov 22 '18 at 10:24

Andy, I tried wrapping the game in a function and calling the function at the end of my code, but that wasn't working either. I just tried commenting out the $(document).on("click", startGame()); and it stops working altogether. It doesn't reset the randomNum so I don't think the whole game is restarting, but will keep on experimenting around this.

– Richard M
Nov 22 '18 at 10:34

@AndyG that seems to be the problem. @Richard if you want to start the game when the dom is ready, it makes sense to just call the startGame() function without the document.on("click",...) part. Or if you want, you can always keep a start button and start the game after you click that. :-)

– theapologist
Nov 22 '18 at 10:34

@Lloyd and AndyG thank you. I just tried the startGame() function standalone and the winOrLose() function still isn't executing. I'm still digging into this and appreciate the feedback!

– Richard M
Nov 22 '18 at 10:40

add a comment |

2

Can you post the HTML as well? Also, can you tell us what error you are receiving when you try to call the function?

– theapologist
Nov 22 '18 at 10:21

2

Possibly because $(document).on("click", startGame()); is restarting the game on every click.

– Andy G
Nov 22 '18 at 10:24

Andy, I tried wrapping the game in a function and calling the function at the end of my code, but that wasn't working either. I just tried commenting out the $(document).on("click", startGame()); and it stops working altogether. It doesn't reset the randomNum so I don't think the whole game is restarting, but will keep on experimenting around this.

– Richard M
Nov 22 '18 at 10:34

@AndyG that seems to be the problem. @Richard if you want to start the game when the dom is ready, it makes sense to just call the startGame() function without the document.on("click",...) part. Or if you want, you can always keep a start button and start the game after you click that. :-)

– theapologist
Nov 22 '18 at 10:34

@Lloyd and AndyG thank you. I just tried the startGame() function standalone and the winOrLose() function still isn't executing. I'm still digging into this and appreciate the feedback!

– Richard M
Nov 22 '18 at 10:40

Can you post the HTML as well? Also, can you tell us what error you are receiving when you try to call the function?

– theapologist
Nov 22 '18 at 10:21

Possibly because $(document).on("click", startGame()); is restarting the game on every click.

– Andy G
Nov 22 '18 at 10:24

Andy, I tried wrapping the game in a function and calling the function at the end of my code, but that wasn't working either. I just tried commenting out the $(document).on("click", startGame()); and it stops working altogether. It doesn't reset the randomNum so I don't think the whole game is restarting, but will keep on experimenting around this.

– Richard M
Nov 22 '18 at 10:34

@AndyG that seems to be the problem. @Richard if you want to start the game when the dom is ready, it makes sense to just call the startGame() function without the document.on("click",...) part. Or if you want, you can always keep a start button and start the game after you click that. :-)

– theapologist
Nov 22 '18 at 10:34

@Lloyd and AndyG thank you. I just tried the startGame() function standalone and the winOrLose() function still isn't executing. I'm still digging into this and appreciate the feedback!

– Richard M
Nov 22 '18 at 10:40

add a comment |

1 Answer
1

active

oldest

votes

The function winOrLose() is being called, just add a console.log right at the beginning and you'll see it...

Your problem lies in the randomNum variable, you are assigning a jQuery object to it instead of an integer... assigning the return of the getRandomInt() function to it, then set it in the text() of #random-number-target. If you do it in just one line, the variable will be holding the element, not the number, so totalScore > randomNum or totalScore === randomNum will never evaluate to true.

$(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();

});

<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>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:</div>

<div class="total-score-title"></div>

<div class="total-score">

  <span id="totalScoreTarget"> </span>

</div>

<br><br><br><br>

edited Nov 22 '18 at 16:36

answered Nov 22 '18 at 10:51

Calvin Nunes

3,74231135

damn, you've been faster - i started with exactly the same line in my answer ;)

– errand
Nov 22 '18 at 10:51

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53428623%2ftrouble-with-function-not-being-called-from-another-function%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

The function winOrLose() is being called, just add a console.log right at the beginning and you'll see it...

$(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();

});

<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>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:</div>

<div class="total-score-title"></div>

<div class="total-score">

  <span id="totalScoreTarget"> </span>

</div>

<br><br><br><br>

edited Nov 22 '18 at 16:36

answered Nov 22 '18 at 10:51

Calvin Nunes

3,74231135

damn, you've been faster - i started with exactly the same line in my answer ;)

– errand
Nov 22 '18 at 10:51

add a comment |

The function winOrLose() is being called, just add a console.log right at the beginning and you'll see it...

$(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();

});

<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>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:</div>

<div class="total-score-title"></div>

<div class="total-score">

  <span id="totalScoreTarget"> </span>

</div>

<br><br><br><br>

edited Nov 22 '18 at 16:36

answered Nov 22 '18 at 10:51

Calvin Nunes

3,74231135

damn, you've been faster - i started with exactly the same line in my answer ;)

– errand
Nov 22 '18 at 10:51

add a comment |

The function winOrLose() is being called, just add a console.log right at the beginning and you'll see it...

$(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();

});

<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>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:</div>

<div class="total-score-title"></div>

<div class="total-score">

  <span id="totalScoreTarget"> </span>

</div>

<br><br><br><br>

edited Nov 22 '18 at 16:36

answered Nov 22 '18 at 10:51

Calvin Nunes

3,74231135

The function winOrLose() is being called, just add a console.log right at the beginning and you'll see it...

$(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();

});

<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>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:</div>

<div class="total-score-title"></div>

<div class="total-score">

  <span id="totalScoreTarget"> </span>

</div>

<br><br><br><br>

$(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();

});

<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>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:</div>

<div class="total-score-title"></div>

<div class="total-score">

  <span id="totalScoreTarget"> </span>

</div>

<br><br><br><br>

$(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();

});

<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>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:</div>

<div class="total-score-title"></div>

<div class="total-score">

  <span id="totalScoreTarget"> </span>

</div>

<br><br><br><br>

edited Nov 22 '18 at 16:36

answered Nov 22 '18 at 10:51

Calvin Nunes

3,74231135

edited Nov 22 '18 at 16:36

answered Nov 22 '18 at 10:51

Calvin Nunes

3,74231135

answered Nov 22 '18 at 10:51

Calvin Nunes

3,74231135

answered Nov 22 '18 at 10:51

Calvin Nunes

3,74231135

damn, you've been faster - i started with exactly the same line in my answer ;)

– errand
Nov 22 '18 at 10:51

add a comment |

damn, you've been faster - i started with exactly the same line in my answer ;)

– errand
Nov 22 '18 at 10:51

damn, you've been faster - i started with exactly the same line in my answer ;)

– errand
Nov 22 '18 at 10:51

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Agfdhyk