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

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

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

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

2回答

5349閲覧

JavaScript サムネイル 動画 切り替え

may88seiji

総合スコア79

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2016/05/11 11:21

編集2016/05/11 13:28

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

###前提・実現したいこと
前提
サムネイルを一覧で表示するHTMLを作成いたしました。
(下記コード参照お願いします。)

実現したいこと
1 JavaScriptによって、サムネイルをクリックすると埋め込まれた動画(youtube)に表示が変わる。
2 サムネイルの数が増えてもまとめて対応できるコードの記述(できれば)

試したこと
動画のCSSをdisplay:none;にして、クリックによってblockに書き換えることを試みましたが、上手くいっておりません。
過去記事等検索いたしましたが問題解決には至っておらず、質問させていただきました。
どうぞよろしくお願いします。

エラー状況
サムネイルクリック後に反応がない。(動画が表示されない。)
動画のcss,display:noneをblockへの上書きの方法がいけない or 私が切り替えのJSのfunctionを適切にかけていないと思われます。正しいfunctionの記述方法、上記以外での動画への切り替え方法をお教え頂けたら幸いです。

###該当のソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>サムネイル 動画 切り替え</title> <style> .item { width: 25%; float: left; padding-bottom: 5%; } .item-box { height: 200px; width: 200px; margin: auto; background-color: #11D8B3; border-radius: 5px; } #movie{ display: none; } </style> </head> <body> <div class="item"> <div id="item-box"><a href="" id=img01><img src="img.jpeg" width="200" height="200" alt=""></a> <iframe id=movie width="200" height="200" src="https://www.youtube.com/embed/SIKSc397sn4" frameborder="0" allowfullscreen></iframe> </div> </div> <div class="item"> <div class="item-box"><a href="" id=img02><img src="img.jpeg" width="200" height="200" alt=""></a> <iframe id=movie width="200" height="200" src="https://www.youtube.com/embed/SIKSc397sn4" frameborder="0" allowfullscreen></iframe></div> </div> <div class="item"> <div class="item-box"><a href="" id=img02><img src="img.jpeg" width="200" height="200" alt=""></a> <iframe id=movie width="200" height="200" src="https://www.youtube.com/embed/SIKSc397sn4" frameborder="0" allowfullscreen></iframe></div> </div> <div class="item"> <div class="item-box"><a href="" id=img02><img src="img.jpeg" width="200" height="200" alt=""></a> <iframe id=movie width="200" height="200" src="https://www.youtube.com/embed/SIKSc397sn4" frameborder="0" allowfullscreen></iframe></div> </div> <script type="text/javascript"> function (){ document.getElementById('img01').addEventListener('click', function () { document.getElementById("img01").style.display="none"; document.getElementById("movie").style.display="block"; }}; </script> </body> </html>

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

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

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

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

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

romiogaku

2016/05/11 13:06

どのようにうまく行っていないのか具体的に記述してください。 また、エラーが発生している場合はそれを参考に調査するのが基本です。 それでもわからなければ発生しているエラーと共に質問してください。
guest

回答2

0

ベストアンサー

私が切り替えのJSのfunctionを適切にかけていないと思われます

chrome dev tool

少なくとも上記のようなエラーが出ているので、その考えは正しいはずですね。
ブラウザの開発者ツールは必ず見るようにしてください。

まずはjavascriptについてネットや本で学習しましょう。
javascriptの関数定義については
https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Functions
にも詳しく載っています。

@kentei_syunraiさんの回答のように「関数式」としても良いですし、今回の場合は単純に

html

1<script type="text/javascript"> 2 document.getElementById('img01').addEventListener('click', function () { 3 document.getElementById("img01").style.display="none"; 4 document.getElementById("movie").style.display="block"; 5 }); 6</script>

としても動きはします。
あるいは即時関数にしたければ

html

1<script type="text/javascript"> 2 (function () { 3 document.getElementById('img01').addEventListener('click', function () { 4 document.getElementById("img01").style.display="none"; 5 document.getElementById("movie").style.display="block"; 6 }); 7 }()); 8</script>

とすることもできます。
javascriptは慣れないうちは括弧の閉じ忘れが多くSyntaxエラーになることが多いので、きちんとしたエディタを使うようにしましょう。また、なるべくjavascriptはjavascriptで別ファイルにしましょう。

また、

html

1<a href="" id=img01>

としていますが、基本的に要素の属性値の引用符は省略すべきではありません。

html

1<a href="" id="img01">

とするべきです。
更に、<a>タグにイベントリスナを追加していますが、<a>タグは本来クリックしたらページ遷移する要素です。
href=""のままだと、自身で指定したイベント処理後すぐページ遷移しようとしてしまいます。(遷移先を空欄にしているのでリロードしたような動きになるはずです)
そのため @kentei_syunra さんのように onclick="change();return false"としてイベント処理後falseを返すことで遷移しないように制御することができます。
あるいは
<a href="#" id="img01"><a id="img01">としても良いかと思います。
自分だったら<a>タグにクリックイベントは極力登録しないですが...

また、コードが書き途中なのかわかりませんが、同じid属性値が見受けられます。
id=img02id=movieのことです。

同じid名は1ページ中に一度しか使ってはいけません。
class属性は複数使えます。

これだけのソースコードでだいぶ指摘箇所が出ているので、まずは腰を据えて勉強してみましょう。
質問はそれからのほうが効率が良いはずです。

投稿2016/05/11 14:46

romiogaku

総合スコア546

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

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

may88seiji

2016/05/11 15:21

回答ありがとうございます。romiogaku様のおっしゃる通り、開発者ツールの使い方、記述方法等と基礎の大切な部分が固まっておりませんでした。 基本的なコードを1つ1つ書いて勉強しようと思います。
guest

0

とりあえず動くようにしたつもりです。

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <title>サムネイル 動画 切り替え</title> 6 <style> 7 .item { 8 width: 25%; 9 float: left; 10 padding-bottom: 5%; 11 12 } 13 .item-box { 14 height: 200px; 15 width: 200px; 16 margin: auto; 17 background-color: #11D8B3; 18 border-radius: 5px; 19 } 20 #movie{ 21 display: none; 22 } 23 </style> 24</head> 25<body> 26 <div class="item"> 27 <div id="item-box"><a href="" id="img01" onclick="change();return false"><img src="img.jpeg" width="200" height="200" alt=""></a> 28 <iframe id="movie" width="200" height="200" src="https://www.youtube.com/embed/SIKSc397sn4" frameborder="0" allowfullscreen></iframe> 29 </div> 30 </div> 31 32<script type="text/javascript"> 33 var change = function (){ 34 document.getElementById("img01").style.display="none"; 35 document.getElementById("movie").style.display="block"; 36 }; 37</script> 38 39 </body> 40</html>

投稿2016/05/11 13:41

kentei_syunrai

総合スコア946

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

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

may88seiji

2016/05/11 14:03

回答ありがとうございます。切り替え、正常に動いております。 kentei_syunraiさんは、id="img01" onclick="change();return false"とされたんですね。 onclickの使い方、大変勉強になりました。 どうやら私は.addEventListenerをうまく使えてないようなので、DOM操作を復習します。 追加の質問で恐縮なのですが、上記のコードでは1つの画像に1つのfunctionを記述することになります。画像が増えてもまとめて対応できるコードはどのようになりますでしょうか。 お教えいただけたら幸いです。
kentei_syunrai

2016/05/11 14:20

functionに引数を持たせればよいのでは? imgIdとmovieIdなど。
may88seiji

2016/05/11 15:28

回答ありがとうございます。 引数によって関数を汎用化することができました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問