<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 = "";
  });

})();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.