Spells and Charms

プログラミング（呪文学）の学習記録。

コールバックをつかった掛け算タイマー

プログラミング

 

0から100までのランダムな数字を2つ掛け算し、
結果を5秒後に表示するというもの。

 

multiplierはすぐには実行せず、executeの中でコールバックされています。

 

 

JavaScript

function multiplier(num1,num2){
document.getElementById("answer").innerHTML = "The answer:" + num1*num2;
}

function executor(num1,num2){
    document.getElementById("answer").innerHTML = "";
    num1 = Math.round(Math.random()* 100); 
    num2 = Math.round(Math.random()* 100); 
    
    document.getElementById("number1").innerHTML = "Random number1: " + num1;
    document.getElementById("number2").innerHTML = "Random number2: " + num2;

    setTimeout(multiplier, 5000, num1 ,num2);
};

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>set timepout_retry</title>
</head>
<body>
    <h1>Multiply five seconds later</h1>
   <form>       
       <input type="button" value = "start!" onclick="executor();"><br>
       <p id="number1"></p>
       <p id="number2"></p>
       <br><br>
       <p id="answer"></p>
    </form> 
<script type="text/javascript" src="settimeout_retry.js"></script>
<noscript>JavaScript is unavaiable</noscript>
</body>
</html>

 

 

最初うまく動かなかったのですが、
multiplierをexecuteの引数としてわたしていたのですが、
multiplierが初期化されてしまっていたことが原因でした。