質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

2030閲覧

JavaScript ランダム表示に合わせて詳細の表示

may88seiji

総合スコア79

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2016/05/09 01:41

編集2016/05/09 02:04

質問を見ていただいてありがとうございます。
###前提・実現したいこと
前提
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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/05/09 01:42

コードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「</>」ボタンを押すとコードブロックになります。
may88seiji

2016/05/09 02:06

ご指摘ありがとうございます???? 修正いたしました。失礼いたしました。
guest

回答2

0

ベストアンサー

ランダムな値を入れる変数resultを、以下の部分('use strict';の下)で宣言します。

JavaScript

1'use strict'; 2var result; // これを追加 3 4//動物ボタン

続いて、動物ボタンの処理で変数resultを新しく宣言せずに、上で追加したresultに乱数を代入するようにします。

JavaScript

1//動物ボタン 2document.getElementById('btn').addEventListener('click', function () { 3 var results = ['ねこ', 'いぬ', 'とり']; 4 result = Math.floor(Math.random() * results.length); // ここのvarを外す 5 document.getElementById('result').innerHTML = results[result]; 6});

こうすることで、決定ボタンでも同じresultを利用できます。

JavaScript

1//決定ボタン 2document.getElementById('btn2').addEventListener('click', function () { 3 // ここでresultを利用できる 4}); 5document.getElementById('btn2').addEventListener('mousedown', function () { 6 // ここでresultを利用できる 7 this.className = 'pushed'; 8}); 9document.getElementById('btn2').addEventListener('mouseup', function () { 10 // ここでresultを利用できる 11 this.className = ''; 12});

他にもやり方はあると思いますが、この方法で実現できると思います。

投稿2016/05/09 02:02

編集2016/05/09 04:38
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

may88seiji

2016/05/09 02:47

回答ありがとうございます。 ``` //決定ボタン document.getElementById('btn2').addEventListener('click', function () { // 試しに追記したコード↓ document.getElementsById('result').details.style.display ="block"; }); ``` 初歩的な質問ですいません、、、 同じresultを利用できるところまでは理解したのですが、そのresultを.detailsのcss上書きのためにはどのようにつなげれば良いでしょうか?
退会済みユーザー

退会済みユーザー

2016/05/09 03:44 編集

決定ボタンが押されるたびに、以下のことをすれば良いです。 resultが0の場合、<div id="cat">を表示し、<div id="dog">と<div id="bird">は非表示にする resultが1の場合、<div id="dog">を表示し、<div id="cat">と<div id="bird">は非表示にする resultが2の場合、<div id="bird">を表示し、<div id="cat">と<div id="dog">は非表示にする これを実現するためには、決定ボタンの中で以下を実行します。 まずその前に<div class="details">を<div id="details">にしましょう。 // 大元の<div id="details">を表示する document.getElementById('details').style.display = "block"; // 続いて、中のcat, dog, birdを全て非表示にする document.getElementById('cat').style.display = "none"; document.getElementById('dog').style.display = "none"; document.getElementById('bird').style.display = "none"; // 全部消えた状態で、resultの数字に対応したものだけを表示する if (result === 0) { // resultが0の場合はcatを表示 document.getElementById('cat').style.display = "block"; } else if (result === 1) { // resultが1の場合はdogを表示 document.getElementById('dog').style.display = "block"; } else if (result === 2) { // resultが2の場合はbirdを表示 document.getElementById('bird').style.display = "block"; } これでどうでしょうか。
退会済みユーザー

退会済みユーザー

2016/05/09 03:18

質問者さんが投稿されたソースコードの<div id="bird ">の部分ですが、birdの後に余分なスペースが入っているため、うまく動作しませんでした。 余分なスペースを消しましょう。
may88seiji

2016/05/09 05:23

hnxmb様、丁寧にありがとうございます。 無事に表示することができました! コードの連動の仕方について大変勉強になりました。 いろいろとコードを組み替えて、応用、復習したいとおもいます。
guest

0

以下のように決定ボタンに処理を記載すると、現在表示されている動物が取得できます。
取得した動物をもとに、どのCSSの設定を切り替えるか処理を追記することで実現できますか?

Javascript

1 //決定ボタン 2 document.getElementById('btn2').addEventListener('click', function() { 3 var animal = document.getElementById('result').innerText; 4 alert(animal); 5 });

投稿2016/05/09 02:04

takyafumin

総合スコア2335

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

may88seiji

2016/05/09 05:35

回答ありがとうございます。 今回は他の方の方法で先に解決したのですが、takyafuminさまの方法も試してみようと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問