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

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

ただいまの
回答率

90.47%

  • JavaScript

    16979questions

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

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 746

may88seiji

score 63

質問を見ていただいてありがとうございます。

前提・実現したいこと

前提
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>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2016/05/09 10:42

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

    キャンセル

  • may88seiji

    2016/05/09 11:06

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

    キャンセル

回答 2

checkベストアンサー

+1

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

'use strict';
var result; // これを追加

//動物ボタン 


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

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


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

//決定ボタン 
document.getElementById('btn2').addEventListener('click', function () {
    // ここでresultを利用できる
});
document.getElementById('btn2').addEventListener('mousedown', function () { 
    // ここでresultを利用できる
    this.className = 'pushed'; 
}); 
document.getElementById('btn2').addEventListener('mouseup', function () { 
    // ここでresultを利用できる
    this.className = ''; 
});


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

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/09 11:47

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

    キャンセル

  • 2016/05/09 12:08 編集

    決定ボタンが押されるたびに、以下のことをすれば良いです。
    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 12:18

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

    キャンセル

  • 2016/05/09 14:23

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

    キャンセル

0

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/09 14:35

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

    キャンセル

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

  • ただいまの回答率 90.47%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

  • 解決済

    エラーは消えたけど...。

    タブの切り替えをやりたいです。 jsの部分がうまくいかないです。 何かいい案ありますでしょうか。 よろしくお願いします。 <html> <head> <title>te

  • 受付中

    イベントバブリングしない理由

    下記ソースは、pを監視しています。 <div id="superParent"> <p id="parent"><span id="child">あいうえお(false/バブ

  • 解決済

    ボタンが起動しません

    前提・実現したいこと javascriptで ドットインストールのジェネレーターを作っています。 http://dotinstall.com/lessons/pwd_gene

  • 解決済

    ボタン早押しゲーム

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width

  • 受付中

    Javascriptで既に画面に表示されているimgを別の画像に変えたい!

    JavascriptでDOM操作で動的に1のボタンを押して画面にimgが表示されます。 2のボタンを押すと1のボタンで出たimgのsrcが変更され別の画像が画面に表示されます。

  • 解決済

    JavaScriptでオセロの駒を表示させたい。

    お世話になります。JavaScriptを用いて、オセロの盤に駒を表示させたいと思っております。 盤自体は、for文とdocument.createElement()の組み合わせで

  • 解決済

    モーダルウインドウ

    モーダルウインドウの閉じるボタンを表示ウインドウの右の外へ出したいのですがうまく出せません。 色々書いてみたんですがpositionの使い方などがよくわからず、うまく活用できず画

  • 解決済

    内容が表示されない

    左図上のように内容が表示されません 宜しくお願い致します。 <!DOCTYPE html> <html lang="ja"> <head> <meta char

同じタグがついた質問を見る

  • JavaScript

    16979questions

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