My Javascript random function will not provide valid responses

February 23, 2023

I am making a simple random number generator game using JS and HTML. In this game, you can set the minimum and the maximum number you want for your random number to be in between.

However, when setting my variables and logging the results, impossible numbers show up. For example, if I set the minimum to 50 and the maximum to 100, answers like 58650 , 16750 , or 31450 will show up. I’ve noticed that the minimum number you set it to will always come at the end. I have tried changing the format and changing the code but nothing seemed to work.

Does anyone know the solution to this? Help is greatly appreciated, thank you!!

Home.html(probably not the problem):

<!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>
  <h1 class="Title">Random Number Generator</h1>
  <hr>
  <div class="container">
    <p> Enter 2 numbers that you want the random number to be in between</p>
    <p id="result" class="hide"></p>
    <div class="container2">
    <input id="inputmin" class="numinput" type="text">
    <p>-</p>
    <input id="inputmax" class="numinput" type="text">
   </div>
    <button id="submitbtn" class="submitbtn">Generate</button>
  </div>
  <script src="/Home.js"></script>
</body>
   </html>

Home.js:

const usermininput = document.getElementById("inputmin")
const usermaxinput = document.getElementById("inputmax")
const usersubmitBtn = document.getElementById("submitbtn")
const result = document.getElementById("result")
function random(min, max) {
  return Math.floor(Math.random() * max) + min;
}

usersubmitBtn.addEventListener("click", () =>{
  const usermin = usermininput.value

  const usermax  = usermaxinput.value
  
  console.log(random(usermin,usermax))
})

>Solution :

The value property of an input element is a string, so you need to convert it to a number first (otherwise, + performs string concatenation rather than addition). This can be done with the unary plus operator, i.e. const usermin = +usermininput.value and const usermax = +usermaxinput.value.

Alternatively, use <input type="number"> and access the valueAsNumber property.

const usermininput = document.getElementById("inputmin")
const usermaxinput = document.getElementById("inputmax")
const usersubmitBtn = document.getElementById("submitbtn")
const result = document.getElementById("result")
function random(min, max) {
  return Math.floor(Math.random() * max) + min;
}
usersubmitBtn.addEventListener("click", () => {
  const usermin = usermininput.valueAsNumber;
  const usermax = usermaxinput.valueAsNumber;
  console.log(random(usermin, usermax));
})

<h1 class="Title">Random Number Generator</h1>
<hr>
<div class="container">
  <p> Enter 2 numbers that you want the random number to be in between</p>
  <p id="result" class="hide"></p>
  <div class="container2">
    <input id="inputmin" class="numinput" type="number">
    <p>-</p>
    <input id="inputmax" class="numinput" type="number">
  </div>
  <button id="submitbtn" class="submitbtn">Generate</button>
</div>