

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

[code]

    <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="画像１" /></li><li><img src="./img/ss3.png" alt="画像２" /></li><li><img src="./img/ss4.png" alt="画像３" /></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>
    
[/code]


CC BY-SA 3.0
2017-07-18T04:53:27.917
36464
2017-07-18T08:14:37.593
2017-07-18T08:14:37.593
3054
24466
question
javascript
ダブルクォーテーション(")を含んだ文字列が unexpected identified というエラーになる


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

[code]

    <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='画像１' /></li><li><img src='./img/ss3.png' alt='画像２' /></li><li><img src='./img/ss4.png' alt='画像３' /></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>
    
[/code]

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


CC BY-SA 3.0
2017-07-18T05:04:22.630
36465
2017-07-18T05:04:22.630
20774
36464
answer


配列の要素として  
`"<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>'`


CC BY-SA 3.0
2017-07-18T05:05:05.583
36466
2017-07-18T05:05:05.583
5044
36464
answer