Getting updated value from Input text using Vanilla JavaScript

Question

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.

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

Answer 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>