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

前提・実現したいこと

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

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

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

該当のソースコード

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/ツールのバージョンなど）

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

kei344

2019/12/11 17:37

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

Miyama11

2019/12/11 17:45

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

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

回答2件

ベストアンサー

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

問題は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