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

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

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

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

HTML

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

Q&A

解決済

1回答

724閲覧

javascriptがうまく機能しない

nguyenseiji

総合スコア156

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

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

HTML

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

0グッド

0クリップ

投稿2020/08/05 12:48

画像をクリックするとメインの画像が動的に切り替わる処理を実装しているのですが

うまくいきません

例としては真ん中にメインの画像があり
その、左にミニ画像が5つ並んでいます
そのミニ画像をクリックするとクリックした画像にメインの画像
が動的に変更するようにしたいです

多分、クリックしたらちゃんと挙動はありますが変更後の画像が表示されないので
多分『 elem.src = '../image/${id}/${image1}';』のパスの変数がうまく展開されていない
のかと思いますがいろいろ調べてみましたがやはり動かず...

最初にPHPに変数を入れていますがそれを
var image1 = <?php echo json_encode($image1); ?>;
でjavascript用の変数にPHPの変数を代入しております

変数の中身は画像の名前になります(例 test.png)

javascript

1 <!--メイン画像--> 2 <?php print '<img class="image1" id="image1" src="../image/'.$id.'/'.$image1.'" >'; ?> 3 4 5 6<!--ここでPHPの変数をjavascriptの変数に代入--> 7 8 9 <script type="text/javascript"> 10var id = <?php echo json_encode($id); ?>; 11var image1 = <?php echo json_encode($image1); ?>; 12var image2 = <?php echo json_encode($image2); ?>; 13var image3 = <?php echo json_encode($image3); ?>; 14var image4 = <?php echo json_encode($image4); ?>; 15var image5 = <?php echo json_encode($image5); ?>; 16var image6 = <?php echo json_encode($image6); ?>; 17 18<!--alertで変数の代入が成功している事を確認済み--> 19alert(image3); 20 21<!--動的にメイン画像が変わるように実装--> 22 23 function LinkClick(param) { 24 var elem = document.getElementById("image1"); 25 26 switch (param) { 27 case 1: 28 elem.src = '../image/${id}/${image1}'; 29 break; 30 case 2: 31 elem.src = '../image/${id}/${image2}'; 32 break; 33 case 3: 34 elem.src = '../image/${id}/${image3}'; 35 break; 36 case 4: 37 elem.src = '../image/${id}/${image4}'; 38 break; 39 case 5: 40 elem.src = '../image/${id}/${image5}'; 41 break; 42 43 } 44 } 45 </script> 46 47 48<!-- ミニ画像の表示aタグでクリックにも対応--> 49 50 <a href="javascript:void(0);" onclick="LinkClick(1);"> <?php print '<img class="image01" id="image1" src="../image/'.$id.'/'.$image1.'" >'; ?> </a> <br/> 51 52 <a href="javascript:void(0);" onclick="LinkClick(2);"> <?php print '<img class="image2" id="image2" src="../image/'.$id.'/'.$image2.'" >'; ?> </a> <br/> 53 54 <a href="javascript:void(0);" onclick="LinkClick(3);"> <?php print '<img class="image3" id="image3" src="../image/'.$id.'/'.$image3.'" >'; ?> </a> <br/> 55 56 <a href="javascript:void(0);" onclick="LinkClick(4);"> <?php print '<img class="image4" id="image4" src="../image/'.$id.'/'.$image4.'" >'; ?> </a> <br/> 57 58 <a href="javascript:void(0);" onclick="LinkClick(5);"> <?php print '<img class="image5" id="image5" src="../image/'.$id.'/'.$image5.'" >'; ?> </a> <br/>

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

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

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

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

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

guest

回答1

0

ベストアンサー

多分『 elem.src = '../image/${id}/${image1}';』のパスの変数がうまく展開されていない

javascriptで文字列の中で変数展開をしたい場合は、シングルクォートではなくバッククォートで囲む必要があるので、おそらくこれが原因ではないでしょうか?
テンプレートリテラル (テンプレート文字列)

投稿2020/08/05 13:25

yuuyu

総合スコア1139

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

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

nguyenseiji

2020/08/05 13:36

恥ずかしながら知らなかったです ありがとうございます
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問