简体   繁体   中英

I have a question about setting a variable “random” to a function to receive a random number between 1- whatever the user input

In the console, I checked that my variable maxAge , is set to the input of the user in the first box.

Then I checked my function getRandomInt worked, and truly get a random number between 1- whatever the user put in box.

For some reason that I don't understand I can't set a variable called randomAge = getRandomInt() Can someone explain to me why? html :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="css.css">

  <title>Document</title>
</head>
<body>
  <h1>Guses The Age.
    From 1 - <span id="secretage"></span>
  </h1>
<p id="massageDisplay"></p>

<br>
  <input id="gusesInput" type="number">
  <input id="numInput" type="number">
  <script src="script.js"></script>
</body>
</html>

js

 var min = 1 var userInput = document.querySelector("#numInput") var userGuses = document.querySelector("#gusesInput") var randomAge = getRandomInt() userInput.addEventListener("change", function() { maxAge = Number(this.value) ageDisplay.textContent = maxAge }) function getRandomInt() { return Math.floor(Math.random() * (maxAge - min)) + min; } // save random age as variable 

// min and max can be set in (randomAge) closure var min=1
var userInput=document.querySelector("#numInput")
var userGuses=document.querySelector("#gusesInput")
/*
this assigns your function to the variable but it does not trigger the function. 

var randomAge=getRandomInt()
*/

var randomAge = (function (){
    var min = 0,
          max = 0,
          age = 0;

    function setMinFunc(newNum){
        return min = newNum;
    }
    function setMaxFunc(newNum){
        return max = newNum;
    }
    function setRandomFunc(){
        return Math.floor(Math.random() * (max - min )) + min;
    }
    function getAgeFunc(newNum){
        return age;
    }
    function checkValsFunc(){
        console.log('min value is ', min, '. max value is ', max, '. age is ', age);
    }

    return{
        setMin: setMinFunc,
        setMax: setMaxFunc,
        setRandom: setRandomFunc,
        gatAge: getAgeFunc,
        checkVals: checkValsFunc
    }
}());

  randomAge.setMin(1);


userInput.addEventListener("change",function(){

      maxAge=Number(this.value)
      ageDisplay.textContent=maxAge
      randomAge.setMax(maxAge);
               randomAge.setRandom();
               randomAge.checkVals();
    })

// you can retrieve your random value by assigning it to a variable like this.

var myRandomVal = randomAge.gatAge();

You are missing many points in order for your code to work:

  • In the getRandomInt() function, maxAge is not defined. This variable should be declared at the same time of all other ones. But I suggest you to use two function parameters to have a minimum and maximum limit.

  • You are trying to attribute the returned result of getRandomInt() to randomAge but as maxAge is not defined outside your event handler... Moreover, if it was the case, randomAge would never change as you are not executing it in your event handler. You need to just define it at the beginning (at 0 for example), and to attribute the result call at change of your input.

Here is below a snippet that should work, with the corrections I suggested. I commented the changes I made, and the lines which are not useful for the snippet .

 var min = 1; var userInput = document.querySelector("#numInput"); //var userGuses = document.querySelector("#gusesInput"); var randomAge = 0; // Initializes here your random int variable. userInput.addEventListener("change", function() { maxAge = Number(this.value); //ageDisplay.textContent = maxAge; randomAge = getRandomInt(min, maxAge); // Attributes your random age to the variable. console.log(randomAge); }) // Added here two parameters for MIN and MAX integer. function getRandomInt(min, max) { return Math.floor(Math.random() * (max - min)) + min; } 
 <input type="number" id="numInput" min="1"> 

 var min = 1 var userInput = document.querySelector("#numInput") var userGuses = document.querySelector("#gusesInput") var randomAge ; var maxAge; userInput.addEventListener("change", function() { maxAge = Number(this.value) ageDisplay.textContent = maxAge //should set the value in function randomAge = getRandomInt(); //check the random value in console console.log(randomAge); }) function getRandomInt() { return Math.floor(Math.random() * (maxAge - min)) + min; } // save random age as variable 

i added this part of code in input event Listerine to get random value som missing like you should define maxAge //should set the value in function //randomAge = getRandomInt(); //check the random value in console //console.log(randomAge);

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM