質問: 質問を見ていただいてありがとうございsます。 ### 前提・実現したいこと 前提 サムネイルを一覧で表示するHTMLを作成いたしました。 (下記コード参照お願いします。) 実現したいこと 1 JavaScriptによって、サムネイルをクリックすると埋め込まれた動画(youtube)に表示が変わる。 2 サムネイルの数が増えてもまとめて対応できるコードの記述(できれば) 試したこと 動画のCSSをdisplay:none;にして、クリックによってblockに書き換えることを試みましたが、上手くいっておりません。 過去記事等検索いたしましたが問題解決には至っておらず、質問させていただきました。 どうぞよろしくお願いします。 エラー状況 サムネイルクリック後に反応がない。(動画が表示されない。) 動画のcss,display:noneをblockへの上書きの方法がいけない or 私が切り替えのJSのfunctionを適切にかけていないと思われます。正しいfunctionの記述方法、上記以外での動画への切り替え方法をお教え頂けたら幸いです。 ### 該当のソースコード ``` サムネイル 動画 切り替え ```
回答: > > 私が切り替えのJSのfunctionを適切にかけていないと思われます > > > !chrome dev tool 少なくとも上記のようなエラーが出ているので、その考えは正しいはずですね。 ブラウザの開発者ツールは必ず見るようにしてください。 まずはjavascriptについてネットや本で学習しましょう。 javascriptの関数定義については にも詳しく載っています。 @kentei_syunraiさんの回答のように「関数式」としても良いですし、今回の場合は単純に ``` ``` としても動きはします。 あるいは即時関数にしたければ ``` ``` とすることもできます。 javascriptは慣れないうちは括弧の閉じ忘れが多くSyntaxエラーになることが多いので、きちんとしたエディタを使うようにしましょう。また、なるべくjavascriptはjavascriptで別ファイルにしましょう。 また、 ``` ``` としていますが、基本的に要素の属性値の引用符は省略すべきではありません。 ``` ``` とするべきです。 更に、タグにイベントリスナを追加していますが、タグは本来クリックしたらページ遷移する要素です。 href=""のままだと、自身で指定したイベント処理後すぐページ遷移しようとしてしまいます。(遷移先を空欄にしているのでリロードしたような動きになるはずです) そのため @kentei_syunra さんのように `onclick="change();return false"`としてイベント処理後falseを返すことで遷移しないように制御することができます。 あるいは ``や``としても良いかと思います。 自分だったらタグにクリックイベントは極力登録しないですが... また、コードが書き途中なのかわかりませんが、同じid属性値が見受けられます。 `id=img02`や`id=movie`のことです。 **同じid名は1ページ中に一度しか使ってはいけません。** class属性は複数使えます。 これだけのソースコードでだいぶ指摘箇所が出ているので、まずは腰を据えて勉強してみましょう。 質問はそれからのほうが効率が良いはずです。