<h1>Generate a <em>Random Number</em> Between...</h1>

<input type="number" id="lownumber" value="1" />
and
<input type="number" id="highnumber" value="100" />

<br />

<button id="getit">Generate!</button>

<div id="randomnumber"></div>
body {
  font: 14px Georgia, serif;
  text-align: center;
}

h1 {
  font: bold 20px system-ui, Helvetica, Sans-Serif;
}

input[type="number"] {
  padding: 10px;
  font: bold 20px system-ui, Helvetica, Sans-Serif;
  width: 60px;
  margin: 10px 0;
}
#randomnumber {
  font-size: 80px;
}
View Compiled 
function IsNumeric(n) {
  return !isNaN(n);
}

const generateButton = document.querySelector("#getit");
const lowInput = document.querySelector("#lownumber");
const highInput = document.querySelector("#highnumber");
const randomNumberOutput = document.querySelector("#randomnumber");

generateButton.addEventListener("click", () => {
  var numLow = lowInput.value;
  var numHigh = highInput.value;

  var adjustedHigh = parseFloat(numHigh) - parseFloat(numLow) + 1;

  var numRand = Math.floor(Math.random() * adjustedHigh) + parseFloat(numLow);

  if (
    IsNumeric(numLow) &&
    IsNumeric(numHigh) &&
    parseFloat(numLow) <= parseFloat(numHigh) &&
    numLow != "" &&
    numHigh != ""
  ) {
    randomNumberOutput.innerText = numRand;
  } else {
    randomNumberOutput.innerText = "Careful now...";
  }

  return false;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.