画像挿入の条件分岐のコード修正をお願いします。

テキストボックスに入っている文章次第でで表示する画像を変えたいと思い見様見真似でコードを書いたのですがいかんせんよくわからずに作動しませんでした
おそらく間違いだらけだと思うのですがどこが間違いかわからないので詳しい方に助けていただきたいです

<!DOCTYPE html> <html> <head><meta charset="UTF-8"> <title>髪</title></head> <form name = "js"> 髪<br> <input type="text" name="yourarea"id="showMessage" autocomplete="on" list="姿"> <datalist id="姿"> <option value="ある"> <option value="ない"> </datalist><br> </fieldset> </form> <input type="button" value="検索" onclick="tbox1()"> <script language="javascript" type="text/javascript"> function tbox1(｛ let i　＝document.js.yourarea.value switch (i) { case ある: function loadImage(id) { var image = new Image(); image.src = "https://www.irasutoya.com/2013/05/blog-post_176.html"; image.onload = (function () { var canvas = document.getElementById(id); var ctx = canvas.getContext('2d'); canvas.width = image.width; canvas.height = image.height; ctx.drawImage(image, 0, 0); }); break; case ない: function loadImage(id) { var image = new Image(); image.src = "https://image.itmedia.co.jp/nl/articles/1701/21/l_miya_170121hagehair10.jpg"; image.onload = (function () { var canvas = document.getElementById(id); var ctx = canvas.getContext('2d'); canvas.width = image.width; canvas.height = image.height; ctx.drawImage(image, 0, 0); }); break; </datalist><br> </fieldset> </form> <br>

m.ts10806

2021/10/27 22:56

はじめからすべての情報を提示するのは難しいかとは思いますが「質問するときのヒント」や「質問テンプレート」にそって書いていくと自然と必要な情報は揃うようになっています。 https://teratail.com/help/question-tips

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

回答1件

本題に入る前に、細かいことで恐縮ですが、質問する時はコードをコードブロックで囲っていただければ幸いです。
詳しくは以下をご覧ください。

質問する際にMarkdownは必ず使って欲しい - Qiita

Saienn877さんのコードをみる限り、JavaScriptやHTMLの基礎がまだ十分身についていないようだと感じました。
そのため、できるだけ丁寧に説明しようとした結果、すごく長くなってしまいました。
大変恐縮ですが、ご参考になれば幸いです。

対応していない`</fieldset>`

</fieldset>に対応する<fieldset>がなかったので補うか、削除しましょう。
今回は特になにかに使っているわけではないようなので、シンプルに削除してしまってよいと思います。

`<input type="text">`を`<select>〜</select>`に

ご質問のコードを読むと、ユーザからの入力はあるとないしか想定していないようです。
このように「特定の値から一つを選んでもらう」ためのHTML要素は<input type="radio">や<select>があります。
今回の場合は<select>がよいのではないでしょうか。

また、<input type="text">のid属性もshowMessageだとよくわからない上、コード中で使っていないのでとりあえず削除しました。

html
1<form name="js">
2  髪<br>
3  <select name="yourarea" autocomplete="on">
4    <option value="ある">ある</value>
5    <option value="ない">ない</value>
6  </select>
7</form>

フォームの値の取得

JavaScriptでフォームの値を取得する方法はいくつかありますが、今回はname属性を指定しているのでそれを使いましょう。

Document.forms - Web API | MDN

また、JavaScriptでは再代入できない変数（≒中身を書き換えない変数）を宣言するのにconstを使います。
というか、できるだけconstを使い、「const宣言した変数に代入しようとしてるよ」という旨のエラーが出たらletに書き換える、くらいにした方がよいでしょう。

JavaScript での変数定義は var を捨てて let, const を使うべき理由 - 自主的20%るぅる

iという変数名では何を表しているのか不明なので、yourareaという名前に変えておきます。

js
1const yourarea = document.forms.js.elements.yourarea.value;

見やすい条件分岐にする

条件分岐はswitchでもできますが、今回はあるとないと「未選択」だけなので、if〜elseで十分です。

JavaScriptでは文字列を"〜"か'〜'で囲みますので注意しましょう。
また「ある文字列と別の文字列が等しい」ということを表すには===を使います。
ユーザが<select>の値を未選択のときはyourareaの値は空文字列（""や''）となりますので、「yourareaの値を!を使ってfalseに変換できるか」をもとに判定します。

js
1if (!yourarea) {
2  /* 未選択の時の処理 */
3} else if (yourarea === "ある") {
4  /* 「ある」の時の処理 */
5} else {
6  /* それ以外、つまり「ない」の時の処理 */
7}

もしどうしてもswitchで書きたいのであれば以下のようにすればよいでしょう。

js
1switch (yourarea) {
2  case "ある":
3    /* 「ある」の時の処理 */
4    break;
5  case "ない":
6    /* 「ない」の時の処理 */
7    break;
8  default:
9    /* それ以外、つまり未選択の時の処理 */
10    break;
11}

`switch`の各`case`について

各caseの中をみると、funcion loadImage(id) {〜}となっています。
しかし、function() {〜}というのは関数宣言でして、関数は宣言しただけでは実行されません。
関数を実行するには関数名(引数)と書きます。今回ならloadImage("<canvas>要素のID")ですね。

関数 - JavaScript | MDN

また、関数宣言は（基本的には）一度すれば十分ですから、tbox1()関数の外に定義しておきましょう。
そもそもfunction tbox1( {と文法エラーがありますので、そこも直します。

というわけで、ここまでのJavaScriptのコード部分をまとめるとこうなります。

js
1function loadImage(id) {
2  /* 画像を読み込む処理 */
3}
4
5function tbox1() {
6  const yourarea = document.forms.js.elements.yourarea.value;
7
8  if (!yourarea) {
9    /* 未選択の時の処理 */
10  } else if (yourarea === "ある") {
11    /* 「ある」の時の処理 */
12  } else {
13    /* それ以外、つまり「ない」の時の処理 */
14  }
15}

JavaScriptで画像を表示するには

Saienn877さんはCanvas APIを使われていますが、ただ画像を読み込んで表示するだけにはちょっと大げさなように思います。
「Canvas APIで画像処理をしたい」などでなければ、予め<img>要素を用意していおいてそれを取得し、src属性に画像のURLを指定することで画像を読み込むようにすれば十分かと。

img タグの画像を動的に変更する : JavaScript | iPentec

というわけでまずは<img>をHTMLに追加します。
検索ボタンの下に表示するようにしてみます。
単純にボタンの後に<img>を追加すると改行されず見づらいので、ボタンの後に改行（<br>）を追加し、その後に<img>を追加します。
あとでJavaScriptから探しやすいよう、id属性もつけておきます。

html
1<input type="button" value="検索" onclick="tbox1()"><br>
2<img id="result" alt="検索結果の画像">

では追加した<img>を探して画像を読み込む処理をloadImage()関数に書いていきます。
loadImage()関数を読むとあるとないのそれぞれの場合の違いは画像のURLだけなので、引数から未使用だったidを削除し、代わりにurlを指定するようにしました。

js
1function loadImage(url) {
2  // <img>要素を探す
3  const img = document.getElementById("result");
4  if (img) {
5    // <img>が見つかったら、src属性にURLを指定して画像を読み込む
6    img.src = url;
7  }
8}

どうしてもCanvas APIを使いたい場合も同様に、HTMLに<canvas>を追加してloadImage()で探します。
画像は<canvas>とは別にメモリ上に読み込み、画像の読み込みが終わったらCanvasに描画します。
この処理はほとんど質問にあるコードと同じですね。

html
1<input type="button" value="検索" onclick="tbox1()">
2<canvas id="result"></canvas>
3
4<script>
5function loadImage(url) {
6  // <canvas>を探す
7  const canvas = document.getElementById("result");
8  const context = canvas?.getContext('2d');  // .? はオプショナルチェーン演算子といいます
9  if (canvas && context) {                   // canvasとcontextが取得できたら
10    const image = new Image();               // 画像オブジェクトを用意
11    image.src = url;                         // URLの画像を読み込む
12    image.addEventListener("load", () => {   // () => {...} はアロー関数といいます
13      // 読み込みが完了したらCanvasのサイズが画像のサイズと同じになるように設定して描画
14      canvas.width = image.width;
15      canvas.height = image.height;
16      context.drawImage(image, 0, 0);
17    })
18  }
19}
20
21/* その他いろいろ */
22</script>

各条件ごとの処理

あとはyourareaの値にあわせてloadImage()を呼び出すだけです。

まず、未選択の場合は「検索」ボタンが押されても何もしないようにします。
これを実現するのは簡単で、ただtbox1()関数の処理を終えればいいだけです。

js
1if (!yourarea) {
2  return;   // 未選択なら何もしない
3} else if (yourarea === "ある") {
4  /* 「ある」の時の処理 */
5} else {
6  /* それ以外、つまり「ない」の時の処理 */
7}

「ある」と「ない」のときはそれぞれURLが異なる画像を読み込むので、loadImage()を呼び出します。
「ある」の時のURLが画像ではなくHTMLだったので、適宜変えてください。

js
1if (!yourarea) {
2  return;   // 未選択なら何もしない
3} else if (yourarea === "ある") {
4  loadImage("「ある」のときの画像のURL");
5} else {
6  loadImage("https://image.itmedia.co.jp/nl/articles/1701/21/l_miya_170121hagehair10.jpg");
7}

以上、長くなってしまってすいませんでした。
コードをコピペしたり写経したり参考にしたりするときは「そのコードが何をしているのか」を（なんとなくでいいので）把握するようにすると、思い通りのプログラムを自分の力で書くことができるようになると思います。
わかりにくいところもあったかと思いますが、頑張ってみてください。

投稿2021/10/27 22:23

編集2021/10/27 22:30