如何在函數onclick中調用方法？

Question

我正在嘗試創建一個遊戲，告訴你與任意數字相比，你有多酷熱。用戶點擊一個按鈕我想運行checkNumber方法。我會怎麼做呢？隨着我試圖學習，請隨時讓我知道這段代碼的所有錯誤。

到目前爲止，我已經嘗試在html：

<button type="submit" id="userGuess" onclick="hotcold().checkNumber()"></button> 

在JS：

function hotcold(){ 
    var realNumber = 0; 
    var newGame = function(){ 
     realNumber = Math.floor(Math.random() * 100)+1 
     return realNumber 
    } 

    var checkNumber = function(){ 
     var userinput = parseInt(document.getElementById("userGuess").value); 
     var message ; 

     if (userinput == realNumber){ message = " Good Job you did it"} 
     else if (Math.abs(userinput - realNumber) > 30){ var message = "You're colder than cold "} 
     else if (Math.abs(userinput - realNumber) <= 30 && Math.abs(userinput - realNumber) > 10){ message = " You're getting closer"} 
     else if (Math.abs(userinput - realNumber) <= 10 && Math.abs(userinput - realNumber) > 2){ message = " You're hot, now im scared"} 
     else if (Math.abs(userinput - realNumber) <= 2){ message = " If you don't get this by next turn, something wrong with you"} 
     else { message = " skjdksjhdsk "} 

     alert(realNumber); 
     alert(message); 
    } 

    return realNumber; 
} 

Answer 1

<input type="text" id="userGuess></input> 
<button onclick="checkNumber()">Click to Guess!</button> 

<script> 

    var realNumber; 
    var newGame = function(){ 
    realNumber = Math.floor(Math.random() * 100) + 1; 
    }; 

    newGame(); 

    var checkNumber = function(){ 
    var userinput = parseInt(document.getElementById("userGuess").value); 
    var message; 

    //Always use three '=' signs in Javascript when comparing values 
    if (userinput === realNumber) { 
     message = " Good Job- you did it!"; 
     newGame(); 
    } else if (Math.abs(userinput - realNumber) > 30) { 
     // the 'message' variable was already declared. Don't use 'var' again here 
     message = "You\'re colder than cold"; 
    } else if (Math.abs(userinput - realNumber) <= 30 && Math.abs(userinput - realNumber) > 10) { 
     message = "You\'re getting closer..."; 
    } else if (Math.abs(userinput - realNumber) <= 10 && Math.abs(userinput - realNumber) > 2) { 
     message = "You\'re hot, now I\'m scared"; 
    } else if (Math.abs(userinput - realNumber) <= 2){ 
     message = "If you don\'t get this by next turn, something\'s wrong with you"; 
    } 
    //Not sure why you would want to show the user the real number before he guessed it 
    //alert(realNumber); 
    alert(message); 
    }; 

</script> 

這裏還有一個小技巧給你：保存自己一些打字和一些不必要的功能，通過調用只是將Math.abs(userinput - realNumber)的結果保存爲一個變量：

... 
var userinput = parseInt(document.getElementById("userGuess").value); 
var difference = Math.abs(userinput - realNumber); 
var message; 
... 
} else if (difference > 30) { 
... 

Answer 2

試試下面的代碼

<button type="submit" id="userGuessButton"></button> 

和

function hotcold(){ 
    var realNumber = 0; 
    var newGame = function(){ 
     realNumber = Math.floor(Math.random() * 100)+1 
     return realNumber 
    } 
newGame(); 
var button = document.getElementById("userGuessButton"); 
button.addEventListener("click", function(){ 
checkNumber(); 
}) 
} 
    var checkNumber = function(){ 


     var userinput = parseInt(document.getElementById("userGuess").value); 

     var message ; 

     if (userinput == realNumber){ message = " Good Job you did it"} 
     else if (Math.abs(userinput - realNumber) > 30){ var message = "You're colder than cold "} 
     else if (Math.abs(userinput - realNumber) <= 30 && Math.abs(userinput - realNumber) > 10){ message = " You're getting closer"} 
     else if (Math.abs(userinput - realNumber) <= 10 && Math.abs(userinput - realNumber) > 2){ message = " You're hot, now im scared"} 
     else if (Math.abs(userinput - realNumber) <= 2){ message = " If you don't get this by next turn, something wrong with you"} 
     else { message = " skjdksjhdsk "} 

     alert(realNumber); 
     alert(message); 
     } 

hotcold();