ドロップダウンリストでの画像の表示

前提・実現したいこと

ドロップダウンリストの形式で3枚の写真のタイトルを選択可能としておき，リスト項目が選択されるとそれに対応する写真を同じウィンドウ上に表示するスクリプトを書く。なお，HTMLファイルを読み込んだ時には初期値として3枚のうち1枚の写真が選択され，かつウィンドウ上に表示されておくようにしておく。その状態からリストから別の写真を選択すると，対応する写真が表示されるようにする。

発生している問題・エラーメッセージ

htmlファイルのある同じディレクトリ内のjpgファイルが正しく表示されない。
リストの項目を一度選ぶと画像が表示されてもう一度選ぶことができない。

該当のソースコード

JavaScript
1<html>
2 <head>
3  <script type="text/javascript">
4   function pmove(){
5    var selected = document.bkmkmenu.bkmks.selectedIndex;
6    document.write ('<img src = document.bkmkmenu.bkmks.options[selected].value>');
7   }
8  </script>
9 </head>
10 <body>
11  <form name = "bkmkmenu">
12   <select name ="bkmks" onchange = "pmove()">
13    <option value = "imgGreece1.jpg">画像1
14    <option value = "imgGreece2.jpg">画像2
15    <option value = "imgGreece3.jpg">画像3
16    </select>
17  </form>
18 </body>
19</html>

試したこと

画像を表示させる際にdocument.writeを用いて表示させようとした。

補足情報（FW/ツールのバージョンなど）

つたない文章で失礼します。もしわかる方いらっしゃいましたらどうか回答よろしくお願いします。

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

回答2件

ベストアンサー

document.write ('<img src = document.bkmkmenu.bkmks.options[selected].value>');

document以下が文字列として評価されています。

function pmove(){
    var selected = document.bkmkmenu.bkmks.selectedIndex;
    var value = document.bkmkmenu.bkmks.options[selected].value;
    document.write ("<img src = " + value +">");
}

これで正常に作動しました。

また、他の方がおっしゃる通り、jsで読み込むDOMのタグが描画されてからscriptは実行しないとエラーになることが多いです。

</body>の直前に<script>～</script>を入れるとよいです。

onchange = "pmove()"　については、画像1の選択時に変化しないため表示されません。
onclickまたはonmouseupなどが良いと思います。

投稿2021/06/06 16:41

gas.engine

総合スコア608

peshi

2021/06/06 19:25

回答ありがとうございます。無事に画像が表示されるようになりました。文字列として評価されていたのですね...とても参考になりました。

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

上から読み込みを行うので
スクリプトの中身を先に読み込み、その後にformの中身を読み込んでいるため「document.bkmkmenu.bkmks.selectedIndex;」の値を取得できないのが原因です。
readyとかでhtml読み込ませた後にjsを発火させるかformの後ろにjsを読み込ませれば動くと思います。

<script type="text/javascript">
   function pmove(){
    var selected = document.bkmkmenu.bkmks.selectedIndex;
    document.write ('<img src = document.bkmkmenu.bkmks.options[selected].value>');
   }
</script>

投稿2021/06/06 13:49