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

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

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

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

Q&A

解決済

2回答

1600閲覧

JavaScriptで条件に応じて異なる画像が表示されるようにしたい

Miyama11

総合スコア8

JavaScript

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

0グッド

0クリップ

投稿2019/12/11 17:34

編集2019/12/11 17:44

前提・実現したいこと

サイト上にJavaScriptで性格診断の機能を実装したいと考えています。
5つの質問に対してチェックボックスにチェックが入っているかどうかで、回答内容を変える仕様です。
診断結果をテキストで表示することはできるのですが、その下にイメージ画像も表示しようとするとうまくいきません。
もちろんイメージ画像も、診断結果によって変化するようにしたいと考えています。
よいアイデアがありましたら、教えていただけると助かります。

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

回答に応じた画像を表示させることができない。

該当のソースコード

Javascript

<form name = "myForm1"> <input type = "checkbox" name = "myQ1">Q1.<br> <input type = "checkbox" name = "myQ2">Q2.<br> <input type = "checkbox" name = "myQ3">Q3.<br> <input type = "checkbox" name = "myQ4">Q4.<br> <input type = "checkbox" name = "myQ5">Q5.<br> <input type = "button" onclick = "myQA1()" value = "診断する"><br> </form> <div id = "myMess"><div> <script> function myQA1(){ myHantei = ""; if(document.myForm1.myQ1.checked == true && document.myForm1.myQ2.checked == true && document.myForm1.myQ3.checked == false && document.myForm1.myQ4.checked == false && document.myForm1.myQ5.checked == true){ myHantei += "<div>あなたは<b>hogehoge</b>タイプです</div>"; } myHantei = "<strong>判定結果</strong><br>" + myHantei; document.getElementById("myMess").innerHTML = myHantei; } </script>

試したこと

1.myHantei += にimgタグを追加しました。

<form name = "myForm1"> <input type = "checkbox" name = "myQ1">Q1.<br> <input type = "checkbox" name = "myQ2">Q2.<br> <input type = "checkbox" name = "myQ3">Q3.<br> <input type = "checkbox" name = "myQ4">Q4.<br> <input type = "checkbox" name = "myQ5">Q5.<br> <input type = "button" onclick = "myQA1()" value = "診断する"><br> </form> <div id = "myMess"><div> <script> function myQA1(){ myHantei = ""; if(document.myForm1.myQ1.checked == true && document.myForm1.myQ2.checked == true && document.myForm1.myQ3.checked == false && document.myForm1.myQ4.checked == false && document.myForm1.myQ5.checked == true){ myHantei += "<div>あなたは<b>hogehoge</b>タイプです</div><br><img src ="https://tochikatsunavi.com/wp-content/uploads/2018/07/tochikatsunavi-yokonarabi-h65.png">; } myHantei = "<strong>判定結果</strong><br>" + myHantei; document.getElementById("myMess").innerHTML = myHantei; } </script>

2.テキスト直下にimgタグを設置し、documentで読み込ませる方法を試しました。

<form name = "myForm1"> <input type = "checkbox" name = "myQ1">Q1.<br> <input type = "checkbox" name = "myQ2">Q2.<br> <input type = "checkbox" name = "myQ3">Q3.<br> <input type = "checkbox" name = "myQ4">Q4.<br> <input type = "checkbox" name = "myQ5">Q5.<br> <input type = "button" onclick = "myQA1()" value = "診断する"><br> </form> <div id = "myMess"><div> <img src = "" name ="myImg"> <script> function myQA1(){ myHantei = ""; if(document.myForm1.myQ1.checked == true && document.myForm1.myQ2.checked == true && document.myForm1.myQ3.checked == false && document.myForm1.myQ4.checked == false && document.myForm1.myQ5.checked == true){ myHantei += "<div>あなたは<b>hogehoge</b>タイプです</div>"; myImage = "https://tochikatsunavi.com/wp-content/uploads/2018/07/tochikatsunavi-yokonarabi-h65.png"; } myHantei = "<strong>判定結果</strong><br>" + myHantei; document.getElementById("myMess").innerHTML = myHantei; document.myImg.src = myImage; } </script>

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

ここにより詳細な情報を記載してください。

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

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

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

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

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

kei344

2019/12/11 17:37

(質問文は編集できます)質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
Miyama11

2019/12/11 17:45

ご指摘ありがとうございます。コードブロックで囲みました。
guest

回答2

0

ベストアンサー

###回答
質問者さんが試された、1つ目の方法で動くと思います。

問題はinnerHtmlに流し込む文字列にダブルクォーテーションが足りないと思います。
また、タグの中にsrc=""があるので、全体はシングルクォーテーションで囲んだ方がいいと思います。

myHantei += '<div>あなたは<b>hogehoge</b>タイプです</div><br><img src ="https://tochikatsunavi.com/wp-content/uploads/2018/07/tochikatsunavi-yokonarabi-h65.png">';

###デバック方法
ボタンクリックした時に期待したロジックが動いているかどうか、alert()で調べていくと、おかしい所がわかると思います。javascript内に構文エラーがあると、javascriptが動かないので。もしくは、ブラウザのデベロッパツールのコンソールで確認する方法もあると思います。

以上です。

投稿2019/12/11 18:31

KazuSaka

総合スコア640

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

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

Miyama11

2019/12/11 20:56

動きました。ありがとうございます! 簡単なケアレスミスだったんですね。 完全独学なのでデバック方法もよく分かっていませんでした。これから確認してみます。
guest

0

1つ目は文字列が正しく組めていないから。(イメージタグが適切に文字列にされていない)

動くサンプル1:https://jsfiddle.net/sqgx1ymw/1/

【JavaScriptのシングルクォーテーションとダブルクォーテーション - Qiita】
https://qiita.com/niusounds/items/f21a28e862a68a098ea7

【テキストを扱う — JavaScript での文字列 - ウェブ開発を学ぶ | MDN】
https://developer.mozilla.org/ja/docs/Learn/JavaScript/First_steps/Strings


2つ目は<div id = "myMess"><div>とHTMLの構文がおかしいことに由来するエラー。

動くサンプル2:https://jsfiddle.net/sqgx1ymw/

投稿2019/12/11 18:26

kei344

総合スコア69364

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問