###前提・実現したいこと
現在ドットインストールの教材を独学中です。
ここでこんなこと書いて良いか迷いましたが、
もし教えていただける方いらしたら助かります。
現在、おみくじを動画通り作っていましたが、
ボタンの透明度が変わらないのと、
ボタンを押したときに引っ込んでくれません。
たぶん、(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>
質問文のコードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
すみません。コードブロックというものを知らないながら使ってみましたがあっているでしょうか?
こちらの環境では変更/修正が確認できませんでした。すみませんが、もう一度確認してもらえませんか?最近teratailで修正が保存されない事がたまにあるようなので・・・。
文章を’’’ ’’’ と前後に付け更新しましたが確認出来ましたでしょうか?
記事を編集すると記事タイトル下部に「・編集 2017/02/09 」のようなリンクが貼られます。それが出ていないので保存が出来ていないか何らかのエラーで失敗している可能性があります。もしかして質問内容をエディタで作ってコピー&ペースしていませんか?teratail のバグで記述内容が表示されないというものが以前有ったので、ペースト後に何文字か記入してみてください。
何度もすみません。出来てますでしょうか?
確認できました。編集ありがとうございます。
回答1件
あなたの回答
tips
プレビュー