Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by nick88p
nick88p
5,716 Points

Create random number based on upper and lower bound input by site visitor via form element and display result in alert

Good day,

I am creating a program that will create a random number that must be between two numbers my site visitor inputs the designated form text fields. Then I want to display the number in an alert dialogue box. Everything seems to be working except for the very last step. The alert dialogue box shows the (much hated) NaN, instead of my number. Any help is much appreciated.

<!doctype html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>Rand Numb Generator</title>
    </head>
    <body>
      <h1>Rand Nmb Generator</h1>
        <form action="main.html" method="post" onsubmit="displayNumber()">
          <label upper>Enter upper bounds</label>
          <input type="text" id="upper" name="upper">
          <br>
          <label lower>Enter lower bounds</label>
          <input type="text" id="lower" name="lower">
          <br>
          <button type="submit">Submit</button>
        </form>
      <script src="main.js"></script>
    </body>
  </html>

function randomNumber(upper, lower) {
return Math.floor(Math.random()*(upper-lower)+1)+lower;
}

function displayNumber() { 
  alert(randomNumber(parseInt(document.getElementById("upper").innerHTML.value), parseInt(document.getElementById("lower").innerHTML.value)));
}