如何获取输入字段值JavaScript

Question

我正在尝试创建一个猜谜游戏，如果用户在输入字段中输入一个数字并单击按钮，文本就会显示该数字是大于还是小于随机数这个数字是由JavaScript创建的。我似乎已经计算出了其他所有内容，但我很难获取输入字段中输入的值。

我很感谢您的帮助。

<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

当没有数据，当你点击，如果数据发生了变化，你不检查正在读你的输入。您应该将判定块放在事件处理程序中检查输入，如下所示：

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"; 
    } 
} 

Answer 2

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 
    } 
}