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

質問を見ていただいてありがとうござい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>

romiogaku

2016/05/11 13:06

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

行動規範の内容に同意します

回答2件

ベストアンサー

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

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

まずは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=img02やid=movieのことです。

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

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

投稿2016/05/11 14:46

romiogaku

総合スコア546

may88seiji

2016/05/11 15:21

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

行動規範の内容に同意します

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

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を記述することになります。画像が増えてもまとめて対応できるコードはどのようになりますでしょうか。お教えいただけたら幸いです。