<div id="js-btn"><button id="" type="button">今日の運勢</button></div>
<div id="js-result"></div>
#js-result {
padding-top:20px;
font-size: 2rem;
}
(function() { //即時関数で囲う。他のプログラムに影響を与えないため。
"use strict"; //厳格モードで実行される。より的確なエラーチェックが行われる。
document.getElementById("js-btn").addEventListener("click", function() {
var results = ["大吉", "小吉", "中吉", "吉", "凶"];
//0から3までの数を生成したい場合
// まずMath.randomで0から0.99999....の乱数を生成
// それを4倍することで、0から3.99999....までの乱数を生成
// Math.floorで小数点以下切り捨てになるので0から3までの整数の乱数が生成できる
// var result = Math.floor(Math.random() * 4);
//数でなくresults.lengthにすることでresultsの数を変更したときのミスを減らせる
var result = Math.floor(Math.random() * results.length);
document.getElementById("js-result").innerHTML = results[result];
});
document.getElementById("js-btn").addEventListener("mousedown", function() {
this.className = "pushed";
});
document.getElementById("js-btn").addEventListener("mouseup", function() {
this.className = "";
});
})();
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.