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

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

ただいまの
回答率

87.94%

ボタンをクリックしたら要素が現れるようにしたいです

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 5,326

score 347

こんにちは。

じゃんけんゲームを作りたいと考え、まずは「スタート」というボタンを押したら、


画像1これが


イメージ説明こうなるようにしたいと考えています。(すみません、スイッチは消える予定です........)

その設計に当たり、JSとjQueryを併用しているのですが、上手く行きません........。
HTMLは以下のようなコードです。

<body>
    <div id="wrapper">
        <header>
            <p style="text-align:center;">じゃんけんクエスト</p>
        </header>
        
        <div id="screen">
        </div>
        
        <div id="your_hands">
            <div id="rock"><img src="img/%E3%81%90%E3%83%BC.png" class="hand_imgs"></div>
            <div id="scissors"><img src="img/%E3%81%A1%E3%82%87%E3%81%8D.png" class="hand_imgs"></div>
            <div id="paper"><img src="img/%E3%81%B1%E3%83%BC.png" class="hand_imgs"></div>
        </div>
        
        <div id="btn">スタート</div> <!-- これは消したいのですがそれもわかっていません........ -->
        
        <footer>
            <hr>
            <p style="text-align:center;">made in keisuke</p>
        </footer>
    
    </div><!-- wrapper -->

</body>
この中の#screenと#your_handsの要素を最初の段階では隠しておき、「スタート」を押すと、


#screen{
    margin:0 auto 10px;
    width:400px;
    height:300px;
    border:solid 2px black;
}

#your_hands{
    margin:0 auto 30px;
    width:900px;
    height:200px;
    position:relative;
}

.hand_imgs{
    position: absolute;
    top:50%;
    margin-top:-90px;
    left:50%;
    margin-left:-90px;
    height:180px;
}

#rock{
    margin:0 auto;
    position:absolute;
    top:0;
    left:0;
    background:red;
    width:200px;
    height:200px;
    border-radius: 50%;
}

#scissors{
    margin:0 auto;
    position:absolute;
    top:0;
    left:350;
    background:blue;
    width:200px;
    height:200px;
    border-radius: 50%;
}

#paper{
    margin:0 auto;
    position:absolute;
    top:0;
    right:0;
    background:green;
    width:200px;
    height:200px;
    border-radius: 50%;
}
といった性質を持った要素が現れる、というのを実行するにはどのようなJS、jQueryを組めばよろしいでしょうか?

因みに私は
$(function(){
            
            $('#btn').click(function(){
                var screen = $('div').attr('id','screen');
                
                $('header').after(screen);
            }); 

});
のような感じで、試しにやってみたのですが上手く行きません。
CSSは既にstylesheetで書いてある筈なのですが........

よろしくお願いいたします!
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

0

#screen{
    margin:0 auto 10px;
    width:400px;
    height:300px;
    border:solid 2px black;
    display:none; /* 追加 非表示 */
}

#your_hands{
    margin:0 auto 30px;
    width:900px;
    height:200px;
    position:relative;
    display:none; /* 追加 非表示 */
}

このふたつの予め隠しておきたい要素をdisplay:noneで隠しておきます。

Jqueryでは、
$(function(){
            
            $('#btn').click(function(){
                //#screen , #your_handsを表示させる
                $('#screen').show();
                $('#your_hands').show();
                //ボタンを非表示にする 
                $(this).hide();
            }); 

});
これで、javascriptで2つの要素が表示され、ボタンが消えるようになると思います。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2015/11/16 15:01

    sansetさん。

    お陰様でできました!
    誠にありがとうございます!

    キャンセル

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

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

関連した質問

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