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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

7961閲覧

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

dialbird

総合スコア379

JavaScript

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2015/11/16 03:51

こんにちは。

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

画像1
これが

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

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

html

1<body> 2 <div id="wrapper"> 3 <header> 4 <p style="text-align:center;">じゃんけんクエスト</p> 5 </header> 6 7 <div id="screen"> 8 </div> 9 10 <div id="your_hands"> 11 <div id="rock"><img src="img/%E3%81%90%E3%83%BC.png" class="hand_imgs"></div> 12 <div id="scissors"><img src="img/%E3%81%A1%E3%82%87%E3%81%8D.png" class="hand_imgs"></div> 13 <div id="paper"><img src="img/%E3%81%B1%E3%83%BC.png" class="hand_imgs"></div> 14 </div> 15 16 <div id="btn">スタート</div> <!-- これは消したいのですがそれもわかっていません........ --> 17 18 <footer> 19 <hr> 20 <p style="text-align:center;">made in keisuke</p> 21 </footer> 22 23 </div><!-- wrapper --> 24 25</body>

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

css

1#screen{ 2 margin:0 auto 10px; 3 width:400px; 4 height:300px; 5 border:solid 2px black; 6} 7 8#your_hands{ 9 margin:0 auto 30px; 10 width:900px; 11 height:200px; 12 position:relative; 13} 14 15.hand_imgs{ 16 position: absolute; 17 top:50%; 18 margin-top:-90px; 19 left:50%; 20 margin-left:-90px; 21 height:180px; 22} 23 24#rock{ 25 margin:0 auto; 26 position:absolute; 27 top:0; 28 left:0; 29 background:red; 30 width:200px; 31 height:200px; 32 border-radius: 50%; 33} 34 35#scissors{ 36 margin:0 auto; 37 position:absolute; 38 top:0; 39 left:350; 40 background:blue; 41 width:200px; 42 height:200px; 43 border-radius: 50%; 44} 45 46#paper{ 47 margin:0 auto; 48 position:absolute; 49 top:0; 50 right:0; 51 background:green; 52 width:200px; 53 height:200px; 54 border-radius: 50%; 55}

といった性質を持った要素が現れる、というのを実行するにはどのようなJS、jQueryを組めばよろしいでしょうか?

因みに私は

jQuery

1$(function(){ 2 3 $('#btn').click(function(){ 4 var screen = $('div').attr('id','screen'); 5 6 $('header').after(screen); 7 }); 8 9});

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

よろしくお願いいたします!

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

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

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

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

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

guest

回答1

0

ベストアンサー

css

1#screen{ 2 margin:0 auto 10px; 3 width:400px; 4 height:300px; 5 border:solid 2px black; 6 display:none; /* 追加 非表示 */ 7} 8 9#your_hands{ 10 margin:0 auto 30px; 11 width:900px; 12 height:200px; 13 position:relative; 14 display:none; /* 追加 非表示 */ 15}

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

Jqueryでは、

javascript

1$(function(){ 2 3 $('#btn').click(function(){ 4 //#screen , #your_handsを表示させる 5 $('#screen').show(); 6 $('#your_hands').show(); 7 //ボタンを非表示にする 8 $(this).hide(); 9 }); 10 11});

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

投稿2015/11/16 05:02

sanset

総合スコア186

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

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

dialbird

2015/11/16 06:01

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問