How to Get Input Field Value JavaScript

Question

I'm trying to create a guessing game that if the user enters a number into an input field and click a button, a text shows up saying if the number is bigger or smaller than a random number that's been created by JavaScript. I seem to have figured out everything else, but I'm having a hard time getting the value that is entered into the input field.

I'd appreciate your help.

<div class="wrap" >
 Project: Guessing Game

 <input type="text" name="inputField" value="" id="inputField"/>
 <button id="guess">Guess!</button>
 <br>
 <p id="result"></p>

</div>

<script type="text/javascript" charset="utf-8">

var $ = function(selector) {
    return document.querySelector(selector);
};

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

var randomNumber = randomRange(1,4);

var myButton = $("#guess");

var myNumber = $("#inputField").value;

var myResult = $("#result");

if ( myNumber > randomNumber) {
    myButton.onclick = function () {
    myResult.innerHTML += "Your number is bigger than the random number";
    }
}
else if ( myNumber < randomNumber){
        myButton.onclick = function () {
        myResult.innerHTML += "Your number is smaller than the random number";
    }
}
else if ( myNumber === randomNumber ){
        myButton.onclick = function () {
        myResult.innerHTML += "Your number matches the random number";
    }
}

</script>

Answer 1

var $ = function(selector) {
    return document.querySelector(selector);
};
var randomRange = function(min,max){
    return Math.round(((Math.random()*(max-min))+min));//notice here,Math.round
};
var randomNumber = randomRange(1,4);
var myButton = $("#guess");
var myNumber = $("#inputField");
var myResult = $("#result");
myButton.onclick = function(){
    var val = parseInt(myNumber.value, 10);
    if(val < randomNumber){
        //smaller code
    }else if(val > randomNumber){
        //bigger code
    }else{
        //equal code
    }
}

Answer 2

Your input is being read when there is no data, and when you click, you don't check if the data has changed. You should place the decision blocks to check the input inside the event handler, like this:

myButton.onclick = function () {
    var myNumber = $("#inputField").value;
    myNumber = parseInt(myNumber, 10);
    if ( myNumber > randomNumber) {
        myResult.innerHTML = "Your number is bigger than the random number";
    } else if ( myNumber < randomNumber){
        myResult.innerHTML = "Your number is smaller than the random number";
    } else if ( myNumber === randomNumber ){
        myResult.innerHTML = "Your number matches the random number";
    }
}