Javascript 如何在函数onclick中调用方法？

我正在尝试创建一个游戏，告诉你与一个随机数相比，你有多热或多冷。用户单击一个按钮，我希望运行

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

函数hotcold（）{
var realNumber=0；
var newGame=函数（）{
realNumber=Math.floor（Math.random（）*100）+1
返回实数
}
var checkNumber=函数（）{
var userinput=parseInt（document.getElementById（“userGuess”）.value）；
var消息；
如果（userinput==realNumber）{message=“做得好”}
else if（Math.abs（userinput-realNumber）>30）{var message=“你比冷还冷”}
else if（Math.abs（userinput-realNumber）10）{message=“你越来越近了”}
else if（Math.abs（userinput-realNumber）2）{message=“你很热，现在我很害怕”}
else if（Math.abs（userinput-realNumber）尝试下面的代码

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



及

函数hotcold（）{
var realNumber=0；
var newGame=函数（）{
realNumber=Math.floor（Math.random（）*100）+1
返回实数
}
新游戏（）；
var button=document.getElementById（“userGuessButton”）；
按钮。addEventListener（“单击”），函数（）{
checkNumber（）；
})
}
var checkNumber=函数（）{
var userinput=parseInt（document.getElementById（“userGuess”）.value）；
var消息；
如果（userinput==realNumber）{message=“做得好”}
else if（Math.abs（userinput-realNumber）>30）{var message=“你比冷还冷”}
else if（Math.abs（userinput-realNumber）10）{message=“你越来越近了”}
else if（Math.abs（userinput-realNumber）2）{message=“你很热，现在我很害怕”}
否则，如果（Math.abs（userinput-realNumber）我添加了我尝试过的内容，只需单击html页面上的一个按钮OK..那么您调用函数的方式是错误的..有关详细信息，请参阅下面的答案
 ...
 var userinput = parseInt(document.getElementById("userGuess").value);
 var difference =  Math.abs(userinput - realNumber); 
 var message;
 ...
 } else if (difference > 30) {
 ...

<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();