おみくじ作り

###前提・実現したいこと
現在ドットインストールの教材を独学中です。
ここでこんなこと書いて良いか迷いましたが、
もし教えていただける方いらしたら助かります。
現在、おみくじを動画通り作っていましたが、
ボタンの透明度が変わらないのと、
ボタンを押したときに引っ込んでくれません。
たぶん、（hover ,opactiy）(mouseup,mousedown)あたりが
おかしいのかなぁと思いました。
コードは何度も確認したのにわかりません。
なぜ、実行できないのか？また、こういう問題を
解決をするためにはどうすべきか教えていただけませんか？
初心者ましてや独学で勉強してますので全然わかりません。
宜しくお願いします。

###該当のソースコード

<html lang="ja">
<head>
   <meta charset="utf-8">
   <title>おみくじ</title>
   <style>
      body {
             background : #e0e0e0 ;
             text-align : center ;
             font-size : 16px ;
             color : #fff ;
             font-family : arial, sans-serif ;
      }
      #result {
           margin : 30px auto ;
           width : 180px ;
           height : 180px ;
           border-radius : 50% ;
           line-height : 180px ;
           font-size : 48px ;
           font-weight : bold ;
           background : #f44336 ;
           box-shadow : 0 2px 10px rgba(0, 0, 0, 0.3) ;
      }
      #btn {
            margin : 0 auto ;
            width : 200px ;
            padding : 5px ;
            border-radius : 5px ;
            background : #00aaff ;
            box-shadow : 0 4px 0 #0088cc ;
            cursor : pointer ;
      }
      #btn : hover {
            opacity : 0.8 ;
      }
      #btn .pushed {
            margin-top : 32px ;
            box-shadow : 0 2px 0 #0088cc ;

      }
   </style>
</head>
<body>
   <div id="result">?</div>
   <div id="btn">あなたの運勢は？</div>
   <script>
      (function() {
            'use strict';
            document.getElementById('btn').addEventListener('click' , function()    {
              // 0 - n
              // Math.floor(Math.random() * (n + 1))
              // 0 - 3
              // Math.floor(Math.random() * 4 )
              //0 - 0.9999.....
              //0 - 3.9999.....
              //0 - 3
              var results = ['大吉', '小吉' , '中吉' , '凶' ,'吉'] ;
              var result =  Math.floor(Math.random() * results.length );

              // document.getElementById('result'). innerHTML = 'hit' ;
               document.getElementById('result'). innerHTML = results [result] ;
          });
          document.getElementById('btn').addEventListener('mousedown', function() {
            this.className = 'pushed';
          });
          document.getElementById('btn').addEventListener('mouseup', function() {
            this.className = '';
          });
      })();
   </script>
</body>
</html>

kei344

2017/02/08 23:10

質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

GenntaNakajo

2017/02/08 23:19

すみません。コードブロックというものを知らないながら使ってみましたがあっているでしょうか？

kei344

2017/02/08 23:22

こちらの環境では変更／修正が確認できませんでした。すみませんが、もう一度確認してもらえませんか？最近teratailで修正が保存されない事がたまにあるようなので･･･。

GenntaNakajo

2017/02/09 01:02

文章を’’’　’’’　と前後に付け更新しましたが確認出来ましたでしょうか？

kei344

2017/02/09 01:28

記事を編集すると記事タイトル下部に「・編集 2017/02/09 」のようなリンクが貼られます。それが出ていないので保存が出来ていないか何らかのエラーで失敗している可能性があります。もしかして質問内容をエディタで作ってコピー＆ペースしていませんか？teratail のバグで記述内容が表示されないというものが以前有ったので、ペースト後に何文字か記入してみてください。

GenntaNakajo

2017/02/09 14:35

何度もすみません。出来てますでしょうか？

kei344

2017/02/09 14:55

確認できました。編集ありがとうございます。