• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:フォームに入力された値により画像を変更)

フォームに入力された値で画像を変更する方法

このQ&Aのポイント
  • HTMLページのテーブル内の画像をフォームの入力値によって別の画像に変更する方法を教えてください。
  • JavaScriptを使用してフォームの入力欄に画像のファイル名を入れ、ボタンを押すことで画像が変更される仕組みを作りたいです。
  • 画像のファイル名の一部をフォームの入力値として受け取り、JavaScriptで画像のファイル名を作成する方法を教えてください。

質問者が選んだベストアンサー

  • ベストアンサー
  • susie-t
  • ベストアンサー率86% (37/43)
回答No.1

別ウィンドウはサブウィンドウ(自身がopenした)でしょうか。 であるなら以下になります。 (エラー処理とか手抜きなので適宜追加してください。) ---------------- 【main.htm】 <html> <script> function changeImg(){ var img = document.getElementById("img"); var name = "img/" + document.getElementById("name").value + ".gif"; img.src = name; } </script> <body> <img src="img/sample1.gif" id="img"/> <input type="text" id="name"/> <input type="button" value="CHANGE" onclick="changeImg();"/> <input type="button" value="SUB" onclick="window.open('sub.htm');"/> </body> </html> ---------------- 【sub.htm】 <html> <script> function changeImg(){ var img = window.opener.document.getElementById("img"); var name = "img/" + document.getElementById("name").value + ".gif"; img.src = name; } </script> <body> <input type="text" id="name"/> <input type="button" value="CHANGE" onclick="changeImg();"/> </body> </html>

kitty1000
質問者

お礼

susie-tさん ご回答ありがとうございました。 大変助かりました。 キャサリン

関連するQ&A