calling a function from inside a variable

Question

I am trying to call the random number generated and set conditionals to the random number, but I don't know how to call it! Can someone please help?

    // This is the random number generator
    $(document).ready(function() {
        var minNumber = 0;
        var maxNumber = 9;
        var randomValue = function(){
            return Math.floor(Math.random() * maxNumber);
        }
        $("#random-number").html(randomValue().toString());
        // I need to return this value to the "myGuess class and print it on the screen"
        console.log(randomValue().toString());
    });
    // This ends the random number generator


    // If you click a number and it equals the random number
    $(".number").on("click", function(){
        var value = $(this).val();
        if($(".guessesLeftVar").text() === function.randomValue){
            $(".winCount").text($(".winCount").text()+value);
        }
        else if($(".guessesLeftVar").text() != function.randomValue){
            $(".lossCount").text($(".lossCount").text()+value);
        }
    });

score 0 · Answer 1 · answered May 14 '17 at 03:22

You need move click event into documnet ready. then call randomValue function from click event. Change your code to following

$(document).ready(function() {
    var minNumber = 0;
    var maxNumber = 9;
    var randomValue = function(){
        return Math.floor(Math.random() * maxNumber);
    }

    $(".number").on("click", function(){

        var random = randomValue();

        $("#random-number").html(random);

        var value = $(this).val();
        if($(".guessesLeftVar").text() === random){
            $(".winCount").text($(".winCount").text()+value);
        }
        else if($(".guessesLeftVar").text() != random){
            $(".lossCount").text($(".lossCount").text()+value);
        }
    });
});

score 0 · Answer 2 · answered May 14 '17 at 04:02

Here is one way you could do what you want in a more organized way:

// This ends the random number generator

// loop over our object displaying each value
function displayValues(obj) {
  $.each(obj, function(key, value) {
    $('#' + key).text(value);
  })
}
// returns random number in the provided range
function getRandomValue(minNumber, maxNumber) {
  return Math.floor(Math.random() * maxNumber);
}

// once the doc loads, do all your event binding
$(document).ready(function() {
 
  // creat object to hold all our vars
  var guesses = {
      remaining: 5,
      wins: 0,
      losses: 0,
      random: getRandomValue(0,9),
    }
    
  // show the initial values
  displayValues(guesses)

  $(".number").on("click", function() {
    var value = $(this).val(); 
    if (Number(value) === guesses.random) {
      guesses.wins++;
      // get a new random number
      guesses.random = getRandomValue(0,9)
    } else {
      guesses.losses++;
      guesses.remaining--;
      if (guesses.remaining == 0) {
        // no guesses left, end game
        $('#numbers').replaceWith("<h1>game over</h1>");
      }
    }
    // show the new values
    displayValues(guesses)
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
wins:
<div id="wins"></div>
<br> losses:
<div id="losses"></div>
<br> remaining guesses:
<div id="remaining"></div>
<br> random number (remove in actual game):
<div id="random"></div>
<br>


<div id="numbers">
<button class="number" value="0">0</button>
<button class="number" value="1">1</button>
<button class="number" value="2">2</button>
<button class="number" value="3">3</button>
<button class="number" value="4">4</button>
<button class="number" value="5">5</button>
<button class="number" value="6">6</button>
<button class="number" value="7">7</button>
<button class="number" value="8">8</button>
<button class="number" value="9">9</button>

</div>

calling a function from inside a variable

2 Answers2