Can't get the value from input type number

Question

I'm trying to get the input values from the "min_num" and "max_num" fields but there's nothing there. Also when I try the parseInt() method I get not a number (NaN)...

How do I solve this?

        var min_num = document.getElementById("min_num").value;
        var max_num = document.getElementById("max_num").value;
        var generate = document.getElementById("generate");

        

        function myRandomNumber(min, max) {

            var randomNumber = Math.floor(Math.random() * max) + min;

            document.getElementById("random_number").value = randomNumber;


        }

        generate.onclick = myRandomNumber(min_num, max_num);

<form action="#">
        <input type="number" id="min_num" placeholder="Minimum number">
        <input type="number" id="max_num" placeholder="Maximum number"><br>
        <input type="text" id="random_number" disabled="disabled" placeholder="Random number">
        <button id="generate">Generate</button>
    </form>

because value does not update the variable when it changes..... You need to read the value when it is changed. Also `generate.onclick = myRandomNumber(min_num, max_num);` calls the function and assigns what it returns to the onclick, it does not call that onclick. And you range function is wrong, it will generate random numbers outside the range. — epascarello, Jul 20 '21 at 14:35
try to remove the `.value` on your variable assignation, and add them to `generate.onclick = () => myRandomNumber(min_num.value, max_num.value);` — Sleepwalker, Jul 20 '21 at 14:36
`.value`s from inputs are strings (even `type="number"`) so you need to convert to a number before using them. — pilchard, Jul 20 '21 at 14:38
Duplicate of [onclick function runs automatically](https://stackoverflow.com/questions/14425397/onclick-function-runs-automatically), [Why is the value of my input always empty if I store it in a variable?](https://stackoverflow.com/questions/58078160/why-is-the-value-of-my-input-always-empty-if-i-store-it-in-a-variable) and [Adding two numbers concatenates them instead of calculating the sum](https://stackoverflow.com/questions/14496531/adding-two-numbers-concatenates-them-instead-of-calculating-the-sum) — Ivar, Jul 20 '21 at 14:42

score 3 · Answer 1 · answered Jul 20 '21 at 14:47

You have 4 problems:

You read the value on page load. The value does not update, it is read that that moment in time and store.
You call a function and what it returns is stored to the event listener
You are working with strings and not numbers. You need to convert the value to a number.
You are not generating a random number in a range like you think you are. It can generate a number that will be greater than the max.

  var min_num = document.getElementById("min_num"); // do not read the value
  var max_num = document.getElementById("max_num");
  var generate = document.getElementById("generate");



  function myRandomNumber(min, max) {
    var randomNumber = Math.floor(Math.random() * (max - min + 1)) + min; // need to subtract the min
    document.getElementById("random_number").value = randomNumber;

  }

  generate.addEventListener("click", function() { // not calling the function
    myRandomNumber(+min_num.value, +max_num.value);  // reading the value and converting it to a number
  });

<form>
  <input type="number" id="min_num" placeholder="Minimum number">
  <input type="number" id="max_num" placeholder="Maximum number"><br>
  <input type="text" id="random_number" disabled="disabled" placeholder="Random number">
  <button type="button" id="generate">Generate</button>
</form>

I am confused on how a number hitting one of the posts is still showing as "in-between". If I do in between 1 & 7, and it gives me 7, that hits a post would therefore not be "in-between"? — BeerusDev, Jul 20 '21 at 14:49
@BeerusDev where do you see in between? Where is this hidden requirement in the OPs post? The code generates a number between min (inclusive) and max (inclusive) — epascarello, Jul 20 '21 at 14:51

Can't get the value from input type number

1 Answers1