Why is my defined range not working in javascript?

Question

My range does not seem to be working. E.g. if I input the smallest number to be 10, and the biggest number to be 20, it would not give me within the range. Any idea how to fix this?

var randomNo;

function playFunction() {
  message1 = document.getElementById("wrongInput");
  message1.innerHTML = "";
  message2 = document.getElementById("wrongInput2");
  message2.innerHTML = "";
  x = document.getElementById("input").value;
  x2 = document.getElementById("input2").value;

  try {
    if (x == "")
      throw "empty";

    if (isNaN(x))
      throw "not a number";
  } catch (err) {
    message1.innerHTML = "Input is " + err;
    message1.style.color = "red";
    x = Number(x);

  }

  try {
    if (x2 == "")
      throw "empty";

    if (isNaN(x2))
      throw "not a number";
    x2 = Number(x2);
  } catch (err) {
    message2.innerHTML = "Input is " + err;
    message2.style.color = "red";
    x2 = Number(x2);
  }

  try {
    if (Number(x) > Number(x2))
      throw "must be higher than the lowest number";
  } catch (err) {
    message2.innerHTML = "The input " + err;

  }

  var min = document.getElementById("input").value;
  console.log(min);
  var max = document.getElementById("input2").value;
  console.log(max);
  randomNo = Math.floor(Math.random() * (max - min + 1))
  console.log(randomNo);

}

<html>
Enter a smaller number<br>
<input id="input" type="text">
<span id="wrongInput"></span><br> Enter a larger number<br>
<input id="input2" type="text">
<span id="wrongInput2"></span><br>
<button type="button" onclick="playFunction()">Play button</button>
<br>

</html>

Saar Davidson · Accepted Answer · 2020-10-26 10:14:35Z

1

You wrote the random part wrong. In Math.random() * (max - min + 1) you actually get the random number (between 0 and 1) and multiply it by the number that comes out of the parenthesis and that would be the new max value of the overall number, but in order to change the min value you'll have to increment this overall number you can do it like so:

function getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
}

and with a bit of improvement in your code:

function getRandomArbitrary(min, max) {
    return Math.random() * (max - min + 1) + min;
}

function playFunction() {
  const message1 = document.getElementById("wrongInput");
  const message2 = document.getElementById("wrongInput2");
  const min = Number(document.getElementById("input").value);
  const max = Number(document.getElementById("input2").value);
  let randomNo;
  
  function init() {
    message2.innerHTML = "";
    message1.innerHTML = "";
  }

  function validateInput(displayErrorElement, value) {
    let message;
    
    if (value == "")
      message =  "empty";
    else if (isNaN(value))
      message = "not a number";
      
    if(message) {
      displayErrorElement.innerHTML = "Input is " + message;
      displayErrorElement.style.color = "red";
      
      return false;
    }
    
    return true;
  }
  
  function validateRange(displayErrorElement, min, max) {
    if (min > max) {
      displayErrorElement.innerHTML = "The input must be higher than the lowest number";
      
      return false;
    }
    
    return true;
  }
  
  init();
  if(!validateInput(message1, min)) return false;
  if(!validateInput(message2, max)) return false;
  if(!validateRange(message2, min, max)) return false;
  
  console.log(min);
  console.log(max);
  randomNo = Math.floor(getRandomArbitrary(min, max));
  console.log(randomNo);

}

label {
  display: block;
}

<label for="input">Enter a smaller number<label>
<input id="input" type="text">
<div id="wrongInput"></div>
<label for="input2">Enter a larger number</label>
<input id="input2" type="text">
<div id="wrongInput2"></div>
<button type="button" onclick="playFunction()">Play button</button>

edited Oct 26, 2020 at 10:14

answered Oct 26, 2020 at 7:36

Saar Davidson

1,3921 gold badge10 silver badges17 bronze badges

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

4 Comments

HelpAGirlOut Over a year ago

Thanks so much for helping me to tidy up my codes, however I'm wondering what was wrong with my random method?

Saar Davidson Over a year ago

I added an explanation (I forgot about that sorry. let me know if it's clear enough

HelpAGirlOut Over a year ago

oh sorry and can i ask, you put getRandomArbitary(min, max) and then at the var randomNo = getRandomArbitary(max,min) does the position of min & max matter?

Saar Davidson Over a year ago

yea sorry my bad. it matters

Collectives™ on Stack Overflow

Why is my defined range not working in javascript?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related