0

Divのhereの部分に配列に入ってる三つの文章にランダムでページ移動せずに表示したいのですが、配列の中がunexpected identifiedというエラーが出ます。何故でしょうか?

<div id="here"></div>
​
      <script type="text/javascript">
        var list = [
      "<div id="quiz1" data-role="page"><div id="imgContainer"><img id="imageFullScreen" src="img/ss1.png" ></div><p>問題:<br>上の画像を拡大してみてください。何か文字が見えませんか?何が書かれているか分かったら、下に答えを書いてください!</p><form name="Sample1_form"><p>答え:<input type="text" name="answer"placeholder="ここに入力"><input type="button" value="答える!" id="btn"onclick="showPage()"></p></form></div>",
      "<div id="quiz2" data-role="page"><div id="button" class="btn">???</div>問題:<br>上の円に指で長押しをしてみましょう。文字が出てきたらその文字を入力してください。<br><p>答え:<input type="text" name="answer"placeholder="ここに入力"><input type="button" value="答える!" id="btn" onclick="showPage()"></p></div>",
      "<div id="quiz3" class="page" data-role="page"><div id="MainView_Area"><ul><li><img src="./img/ss2.png" alt="画像1" /></li><li><img src="./img/ss3.png" alt="画像2" /></li><li><img src="./img/ss4.png" alt="画像3" /></li></ul></div><div class="setsumon">問題:<br>上の画像を左に向かって動かしてください。何か文字が見えませんか?何が書かれているか分かったら、下に答えを書いてください!<br><p>答え:<input type="text" name="answer"placeholder="ここに入力"> <input type="button" value="答える!" id="btn" onclick="showPage()"></p></div></div>"
      ];
​
      var num = Math.floor(Math.random() * list.length);
      document.getElementById('here').innerHTML = list[num];
      </script>

2 件の回答 2

2

配列の要素として
"<div id="quiz1" data-role="page"><div id="imgContainer"><img id="imageFullScreen" src="img/ss1.png" ></div><p>問題:<br>上の画像を拡大してみてください。何か文字が見えませんか?何が書かれているか分かったら、下に答えを書いてください!</p><form name="Sample1_form"><p>答え:<input type="text" name="answer"placeholder="ここに入力"><input type="button" value="答える!" id="btn"onclick="showPage()"></p></form></div>"
のようになってますが、
""で囲まれた文字列の中で"をそのまま使うことはできません。
(\でエスケープすることもできますが今回の場合'で囲む方が楽です)
' で囲むように変更して下さい。

例:
'<div id="quiz1" data-role="page"><div id="imgContainer"><img id="imageFullScreen" src="img/ss1.png" ></div><p>問題:<br>上の画像を拡大してみてください。何か文字が見えませんか?何が書かれているか分かったら、下に答えを書いてください!</p><form name="Sample1_form"><p>答え:<input type="text" name="answer"placeholder="ここに入力"><input type="button" value="答える!" id="btn"onclick="showPage()"></p></form></div>'

0

3つの要素のなかのダブルクォーテーションをシングルクォーテーションに変換してみてください。(例:下記)

<div id="here"></div>
  <script type="text/javascript">
    var list = [
  "<div id='quiz1' data-role='page'><div id='imgContainer'><img id='imageFullScreen' src='img/ss1.png' ></div><p>問題:<br>上の画像を拡大してみてください。何か文字が見えませんか?何が書かれているか分かったら、下に答えを書いてください!</p><form name='Sample1_form'><p>答え:<input type='text' name='answer'placeholder='ここに入力'><input type='button' value='答える!' id='btn'onclick='showPage()'></p></form></div>",
  "<div id='quiz2' data-role='page'><div id='button' class='btn'>???</div>問題:<br>上の円に指で長押しをしてみましょう。文字が出てきたらその文字を入力してください。<br><p>答え:<input type='text' name='answer'placeholder='ここに入力'><input type='button' value='答える!' id='btn' onclick='showPage()'></p></div>",
  "<div id='quiz3' class='page' data-role='page'><div id='MainView_Area'><ul><li><img src='./img/ss2.png' alt='画像1' /></li><li><img src='./img/ss3.png' alt='画像2' /></li><li><img src='./img/ss4.png' alt='画像3' /></li></ul></div><div class='setsumon'>問題:<br>上の画像を左に向かって動かしてください。何か文字が見えませんか?何が書かれているか分かったら、下に答えを書いてください!<br><p>答え:<input type='text' name='answer'placeholder='ここに入力'> <input type='button' value='答える!' id='btn' onclick='showPage()'></p></div></div>"
  ];
  var num = Math.floor(Math.random() * list.length);
  document.getElementById('here').innerHTML = list[num];
  </script>

質問者様の書き方だと、quiz1などが変数のように扱われてしまい構文エラーになっているかと思います。

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。