如何在函数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();