質問を見ていただいてありがとうございます。
###前提・実現したいこと
前提
HTML&CSS,JavaScriptで乱数に合わせて表示が変わるボタンを作成しました。
(下記コードを参照お願いします)
実現したいことは、ランダム表示された結果に対して、「決定」ボタンを押すと詳細を表示することです。
###試したこと、困っていること
詳細情報は事前にHTMLに記載し、CSSをdisplay:none;にしてます。
こちらをdisplay:block;に上書きすることで表示しようと思いましたが、ランダムに生成された値に対応してCSSを書き換える、という点で詰んでおります。
皆様には、ランダム表示に対する「決定」ボタンの連動についてお教えいただけたら幸いです。
また、他により良い方法もございましたらご教授ください。
どうぞよろしくお願いします。
###該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ランダムボタン</title> <style> body { background: #fff; text-align: center; font-size: 18px; color: black; font-family: Arial, sans-serif; } #result { margin: 30px auto; width: 180px; height: 180px; border-radius: 50%; line-height: 180px; font-size: 48px; background: #ddd; } #btn { margin: 0 auto; width: 140px; padding: 5px; border-radius: 5px; background: #ddd; cursor: pointer; } #btn2{ margin: 0 auto; margin-top: 20px; width: 140px; padding: 5px; border-radius: 5px; background: #ddd; cursor: pointer; } #btn:hover { opacity: 0.8; } #btn.pushed { margin-top: 32px; } #btn2:hover { opacity: 0.8; } #btn2.pushed { margin-top: 32px; } .details { margin-top: 30px; display: none; } .details img { border-radius: 5px; } </style> </head> <body> <div id="result">?</div> <div id="btn">動物</div> <div id="btn2">決定</div> <div class="details"> <div id="cat"> <a href="" target="_blank"> <img Src="" Border="0" Width="240" Height="160"></a> <p>猫詳細</p> </div> <div id="dog"> <a href="" target="_blank"> <img Src="" Border="0" Width="240" Height="160"></a> <p>犬詳細</p> </div> <div id="bird "> <a href="" target="_blank"> <img Src="" Border="0" Width="240" Height="160"></a> <p>鳥詳細</p> </div> </div> <script> (function () { 'use strict'; //動物ボタン document.getElementById('btn').addEventListener('click', function () { var results = ['ねこ', 'いぬ', 'とり']; var result = Math.floor(Math.random() * results.length); document.getElementById('result').innerHTML = results[result]; }); document.getElementById('btn').addEventListener('mousedown', function () { this.className = 'pushed'; }); document.getElementById('btn').addEventListener('mouseup', function () { this.className = ''; }); //決定ボタン document.getElementById('btn2').addEventListener('click', function () { }); document.getElementById('btn2').addEventListener('mousedown', function () { this.className = 'pushed'; }); document.getElementById('btn2').addEventListener('mouseup', function () { this.className = ''; }); })(); </script> </body></html>
回答2件
あなたの回答
tips
プレビュー