如何獲取輸入字段值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 
    } 
}