質問編集履歴

1 ソースコードをコピペし直し

GenntaNakajo

GenntaNakajo score 12

2017/02/09 23:34  投稿

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

    19532 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る