=
サンプルコードと解説はこちら
<div>
<div style="text-align:center;">
<div style="font-size:48px;margin:30px 0px;color:#000;line-height:56px;">
<span id="num1"></span><span id="num2"></span>=<span id="num3"></span>
</div>
<input type="button" value="解答表示" onclick="counter()" style="padding:10px;">
</div>
<script>
var enzan_array = ["+","-"];
function math1(){
var min = 10;
var max = 99;
var a = Math.floor( Math.random() * (max + 1 - min) ) + min;
return a;
}
function mondai(){
var num1 = math1();
var num2 = math1();
var enzan = enzan_array[Math.floor(Math.random() * enzan_array.length)];
//プラス、マイナスをランダムで表示
if(enzan == "+"){
var num3 = num1 + num2;
}else if(enzan == "-"){
var num3 = num1 - num2;
}
//htmlに問題と解答を表示
document.getElementById("num1").innerHTML = num1;
document.getElementById("num2").innerHTML = enzan + num2;
document.getElementById("num3").innerHTML = num3;
//文字を白色にして非表示にしておく
document.getElementById("num3").style.color = "white";
}
function counter(){
//ボタンクリックの回数が偶数か奇数かで解答の文字色を白か黒か切り替える
if(not % 2 == 1){
mondai();
}else{
document.getElementById("num3").style.color = "black";
}
not++;
}
var not = 0;
mondai();
</script>
</div>
コメント