1

Background -
I am new to JavaScript world and working on a small application to generate random number between a range. Two Inputs are taken by the user i.e. "minValue" and "maxValue" of the range and random number is generated by clicking on the "Generate" button.

Question -
How can I get the input from these two number fields when it gets updated again and again using vanilla JavaScript without any framework ?

I want to alert the user if they put the value vice versa before hitting generate button. Means if any user put minimum value in maxValue input and maximum value in minValue input. As soon as user stops I just want to make a alert for it. I know it can be done easily after hitting generate button but just for learning purpose I want to perform the operation this way.

Right now I am getting blank value of variable MinValue and maxValue at the beginning of the program and after that value is not updated by changing number field value.

enter image description here

const numberGenerator = document.querySelector(".random-number");
const button = document.querySelector(".button1");
const minValue = document.querySelector("#min").value;
const maxValue = document.querySelector("#max").value;

// console.log(numberGenerator);
// console.log(button);
//console.log(minValue);
//console.log(maxValue);

let generateRandomNumber = (max, min) => {
  randomNumber = Math.floor(Math.random() * (max - min)) + min
  numberGenerator.innerHTML = randomNumber;
};

button.addEventListener("click", generateRandomNumber, minValue, maxValue);
<div class="outer-box">
  <div class="generator-box">
    <h1> Random Number Generator </h1>
    <div class="inputs">
      <label for="min">Min Value:</label>
      <input type="number" id="min" name="min" placeholder="Enter min value"><br><br>
      <label for="max">Max Value:</label>
      <input type="number" id="max" name="max" placeholder="Enter max value"><br><br>
    </div>
    <span class=random-number>Click to generate</span>
    <hr>
    <div class="buttons">
      <button class='button1'>Generate</button>
    </div>
  </div>
</div>

Thank you

Improve this question
7
  • Just read the input values inside your function. Commented Sep 21, 2021 at 5:59
  • @RobbyCornelissen But what if I want to know the value of these two inputs before hitting the "Generate" button ? Commented Sep 21, 2021 at 6:04
  • Just retrieve the value at whatever time you need it. You can read the value as many times as you want... Commented Sep 21, 2021 at 6:05
  • @RobbyCornelissen I want to alert the user if they put the value vice versa before hitting generate button. Means if any user put minimum value in maxValue input and maximum value in minValue input. As soon as user stops I just want to make a alert for it. I know it can be done easily after hitting generate button but just for learning purpose I want to perform the operation this way. Commented Sep 21, 2021 at 6:11
  • 1
    You can subscribe to the change event for these input fields, to trigger a function when the value inside them has been modified (i.e., field loses focus.) The input event is similar, but already fires while the user is still typing the value. Commented Sep 21, 2021 at 9:16

3 Answers 3

Reset to default
1
  1. Only create variables that references the elements, ex. minInput, maxInput,
  2. add event listeners to the elements. 'click' for the button and 'change' for the inputs,
  3. use parseInt and store the input values in variables,
  4. check if any of them is NaN (not a number),
  5. generate a number of both inputs have numbers.

If I were you, I would give both the button and the .random-number span unique ids too, in order to hint that they are referenced in javascript code.

const numberGenerator = document.querySelector(".random-number");
const generateButton = document.querySelector(".button1");
const minInput = document.getElementById("min");                 // 1
const maxInput = document.getElementById("max");                 // 1

generateButton.addEventListener('click', generateRandomNumber);  // 2
minInput.addEventListener('change', generateRandomNumber);       // 2
maxInput.addEventListener('change', generateRandomNumber);       // 2

function generateRandomNumber() {
  let min = parseInt(minInput.value);                            // 3
  let max = parseInt(maxInput.value);                            // 3
  const BOTH_INPUTS_GOT_VALUES = !isNaN(min) && !isNaN(max);     // 4
  
  if (BOTH_INPUTS_GOT_VALUES) {                                  // 5
    randomNumber = Math.floor(Math.random() * (max - min)) + min;
    numberGenerator.innerHTML = randomNumber;
  }
}
.inputs {
  margin-bottom: 1rem;
}
<div class="outer-box">
  <div class="generator-box">
    <h1> Random Number Generator </h1>
    <div class="inputs">
      <label for="min">Min Value:</label>
      <input type="number" id="min" name="min" placeholder="Enter min value">
      
      <label for="max">Max Value:</label>
      <input type="number" id="max" name="max" placeholder="Enter max value">
      
    </div>
    <span class=random-number>Click to generate</span>
    <hr>
    <div class="buttons">
      <button class='button1'>Generate</button>
    </div>
  </div>
</div>

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

To Get The Updated Value You Have To Put

const minValue = document.querySelector("#min").value;
const maxValue = document.querySelector("#max").value;

Inside

let generateRandomNumber = () => {...}

If You Put It Outside of generateRandomNumber then it will set the values of inputs when the page is loaded And If You Put It In The generateRandomNumber then It will reassign when that function is called

const numberGenerator = document.querySelector(".random-number");
const button = document.querySelector(".button1");


let generateRandomNumber = () => {
    var min = document.querySelector("#min").value;
    var max = document.querySelector("#max").value;
    
    min = Math.ceil(min);
    max = Math.floor(max);
    randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
    numberGenerator.innerHTML = randomNumber;
};

button.addEventListener("click", generateRandomNumber);
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Number Generator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="outer-box">
        <div class="generator-box">
            <h1> Random Number Generator </h1>
            <div class="inputs">
                <label for="min">Min Value:</label>
                <input type="number" id="min" name="min" placeholder="Enter min value"><br><br>
                <label for="max">Max Value:</label>
                <input type="number" id="max" name="max" placeholder="Enter max value"><br><br>
            </div>
            <span class=random-number>Click to generate</span>
            <hr>
            <div class="buttons">
                <button class='button1'>Generate</button>
            </div>
        </div>
    </div>
    <script src='random_number_generator.js'></script>
</body>
</html>

Update : Get The Updated Value On Input ( Before Pressing The Button )

const numberGenerator = document.querySelector(".random-number");
const button = document.querySelector(".button1");
const error = document.querySelector(".error");
const minInput = document.getElementById("min");
const maxInput = document.getElementById("max");

var min = 0;
var max = 0;

maxInput.oninput = valueDetected;
minInput.oninput = valueDetected;

function valueDetected(){
  console.log("Max: "+maxInput.value+" & Min: "+minInput.value)
}

let generateRandomNumber = () => {
    min = Math.ceil(min);
    max = Math.floor(max);
    randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
    numberGenerator.innerHTML = randomNumber;
};


button.addEventListener("click", generateRandomNumber);
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Number Generator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="outer-box">
        <div class="generator-box">
            <h1> Random Number Generator </h1>
            <div class="inputs">
                <label for="min">Min Value:</label>
                <input type="number" id="min" name="min" placeholder="Enter min value" value=0><br><br>
                <label for="max">Max Value:</label>
                <input type="number" id="max" name="max" placeholder="Enter max value" value=0><br><br>
            </div>
            <span class=random-number>Click to generate</span>
            <hr>
            <div class="buttons">
                <button class='button1'>Generate</button>
        </div>
    </div>
    <script src='random_number_generator.js'></script>
</body>
</html>

Validated One

const numberGenerator = document.querySelector(".random-number");
const button = document.querySelector(".button1");
const error = document.querySelector(".error");
const minInput = document.getElementById("min");
const maxInput = document.getElementById("max");

var min = 0;
var max = 0;

maxInput.oninput = checkValid;
minInput.oninput = checkValid;

function checkValid(){
  if(parseInt(maxInput.value) < parseInt(minInput.value)){
    button.style.display = "none"; 
    error.style.display = "block";
  }
  else {
    button.style.display = "block"; 
    error.style.display = "none";
    min = minInput.value;
    max = maxInput.value;
  }
}

let generateRandomNumber = () => {
    min = Math.ceil(min);
    max = Math.floor(max);
    randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;
    numberGenerator.innerHTML = randomNumber;
};


button.addEventListener("click", generateRandomNumber);
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Number Generator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="outer-box">
        <div class="generator-box">
            <h1> Random Number Generator </h1>
            <div class="inputs">
                <label for="min">Min Value:</label>
                <input type="number" id="min" name="min" placeholder="Enter min value" value=0><br><br>
                <label for="max">Max Value:</label>
                <input type="number" id="max" name="max" placeholder="Enter max value" value=0><br><br>
            </div>
            <span class=random-number>Click to generate</span>
            <hr>
            <div class="buttons">
                <button class='button1'>Generate</button>
                <span class="error" style="color: red; display: none;">You Cannot Put A  Maximum Value Less Than The Minimum Value</span>
            </div>
        </div>
    </div>
    <script src='random_number_generator.js'></script>
</body>
</html>

Improve this answer

4 Comments

And is there any way that I just keep getting updated value of these input fields without hitting the generate button ? It may be a naive question but asked just for curiosity.
Do you Mean Get The Values Before Hitting The Buttons?
Yes !! , as the user starts typing into the field, I should get the value at that time only.
Now See I Have Updated My Answer
0

You need to add onclick event in button and call funcation.

And if you want before clicking the button then you need to add min and max textbox onchange event and write your logic

please check following way

<button class='button1' onclick="generateRandomNumber()">Generate</button>

And this your logic in funcation.

<script>
    function generateRandomNumber() {
     const numberGenerator = document.querySelector(".random-number");
     const button = document.querySelector(".button1");
     const minValue = document.querySelector("#min").value;
     const maxValue = document.querySelector("#max").value;
     randomNumber = Math.floor(Math.random() * (maxValue-minValue)) + minValue
     numberGenerator.innerHTML = randomNumber;
    }
</script>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.