フォームに入力した文字の正誤判定をボタンで行うには

前提・実現したいこと

都道府県クイズ（ランダム出題）をつくっています。
理想としては（https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12163476872）の入力での正誤判定を目指しています。
出題された問題の答えををフォームに入力し、「判定」を押すことで回答が正解か不正解か表示させたいのですがうまくいきません。
具体的には「判定」ボタンを押しても何も起こらず以下のような画面のままです。
エラーは以下のように出ています。

javaScriptとhtml初心者につき、ソースコードに至らない点があると思いますがご教授お願い致します。

該当のソースコード

javaScript
1ソースコード
2
3<!DOCTYPE html>
4<head>
5<meta charset="UTF-8">
6<title>練習</title>
7
8<script  src="https://code.jquery.com/jquery-2.1.4.min.js">
9  </script>
10
11<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">
12</script>
13
14
15
16</head>
17<center>
18<h1>都道府県クイズ</h1>
19<hr>
20
21<!--―― 設問 ――-->
22<div id="Quiz">
23
24<h2>問題</h2>
25<table>
26<tr>
27<td>
28<div style="font-size:30pt;">
29<p id="Q_text"></p>
30<center>
31<img id="Q_img" >
32</div>
33</td>
34</tr>
35</table>
36
37<p>
38  <div ng-controller="answer">
39<input type="text" ng-model="text" />
40<button ng-click="click()">判定</button>
41<p>
42
43
44<h2>解答</h2>
45<div id="Q_log" style="font-size:30pt;"></div>
46
47
48<div id="Result" style="display:none">
49<table>
50<caption>成績発表</caption>
51<tbody></tbody>
52</table>
53<div>
54<a href="javascript:history.back()">前のページ</a>
55<a href="javascript:initQ()">やり直し</a>
56<a href="">次のページ</a>
57</div>
58</div>
59
60
61<!--―― スクリプト ――-->
62<script type="text/javascript">
63
64/*---- 設問リスト ----*/
65var QlistOriginal = [
66{
67"Idx": 0,
68"text": "東京ディズニーリゾートがある都道府県は？",
69"A": "千葉県"
70},
71{
72"Idx": 1,
73"text": "USJがある都道府県は？",
74"A": "大阪府"
75},
76{
77"Idx": 2,
78"text": "明太子が有名な県は？",
79"A": "福岡県"
80},
81];
82
83/*---- グローバル変数 ----*/
84//----] 出題数
85var Qmax = QlistOriginal.length;
86//----] 出題番号、問題リスト、ログ配列
87var Qcount, Qlist, Qlog;
88
89/*---- 関数 : 初期化 ----*/
90function initQ() {
91//----] 回答記録をクリア
92Qlog = new Array();
93document.getElementById("Q_log").innerHTML = "";
94//----] 設問リストを初期化
95Qlist = JSON.parse( JSON.stringify( QlistOriginal ) );/*設問リスト*/
96Qcount/*出題番号*/ = 0;
97//----] 表示切替え
98document.querySelector( "#Quiz" ).style.display = "block";
99document.querySelector( "#Result" ).style.display = "none";
100document.querySelector( "#Result tbody" ).innerHTML = "";
101//----] １問目を出題
102setQ();
103}
104
105/*---- 関数 : 出題 ----*/
106function setQ() {
107//----] 問題をランダムに抽出
108var random = Math.floor( Math.random()*Qlist.length );
109var Q = Qlist.splice( random, 1 )[ 0 ];
110//----] 抽出した問題を Qlog に移植
111Qlog.push( Q );
112//----] 問題,画像を表示
113document.getElementById( "Q_text" ).innerHTML = ( Qcount+1 )+"問目："+Q.text;
114document.getElementById( "Q_img" ).src = "./img/"+Q.Idx+".PNG";
115}
116
117
118/*---- 関数 : 正解チェック ----*/
119function checkA() {
120//----] 現在の問題を取得
121var Q = Qlog[ Qlog.length-1 ];
122//----] 答え合わせ
123
124
125Q.selection = A;
126Q.bingo = (text ==Q.A );
127//----] 結果を出力
128var log = document.getElementById( "Q_log" );
129//解答したものが増えていく
130log.appendChild( document.createTextNode( ( Qcount+1 )+"問目" ) );
131var span = log.appendChild( document.createElement( "span" ) );
132span.style.color = Q.bingo ? "blue" : "red" ;
133span.appendChild( document.createTextNode( Q.bingo ? "○" : "×" ) );
134log.appendChild( document.createTextNode( A ) );
135
136
137
138//----] 次の問題
139if( ++Qcount < Qmax ){
140setQ();
141}
142else{
143var tbody = document.querySelector( "#Result tbody" );
144//----]----] １列目
145var tr = tbody.appendChild( document.createElement( "tr" ) );
146var cell = tr.appendChild( document.createElement( "th" ) );
147cell.appendChild( document.createTextNode( "問題" ) );
148for(var i=0;i<Qlog.length;i++){
149cell = tr.appendChild( document.createElement( "th" ) );
150cell.appendChild( document.createTextNode( i+1 ) );
151}
152//----]----] ２列目
153tr = tbody.appendChild( document.createElement( "tr" ) );
154cell = tr.appendChild( document.createElement( "th" ) );
155cell.appendChild( document.createTextNode( "正／誤" ) );
156for(var i=0;i<Qlog.length;i++){
157cell = tr.appendChild( document.createElement( "td" ) );
158cell.appendChild( document.createTextNode( Qlog[ i ].bingo ? "○": "×" ) );
159cell.style.color = Qlog[ i ].bingo ? "blue" : "red" ;
160}
161//----]----] 表示
162document.querySelector( "#Quiz" ).style.display = "none";
163document.querySelector( "#Result" ).style.display = "block";
164}
165}
166
167/*---- 初期化実行 ----*/
168initQ();
169
170</script>
171

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

ATOMを使用しています。

Lhankor_Mhy

2020/07/31 05:24

「うまくいきません」とは、具体的には何が起きていますか？

oreo_oreo

2020/07/31 05:30

「判定」のボタンを押しても何も起こりません。そのため、以下の部分のソースコードに誤りがあると考えているのですが、どのようなソースコードに変えればよいかわかりません。 /*---- 関数 : 正解チェック ----*/ function checkA() { //----] 現在の問題を取得 var Q = Qlog[ Qlog.length-1 ]; //----] 答え合わせ Q.selection = A; Q.bingo = (text ==Q.A ); //----] 結果を出力 var log = document.getElementById( "Q_log" ); //解答したものが増えていく log.appendChild( document.createTextNode( ( Qcount+1 )+"問目" ) ); var span = log.appendChild( document.createElement( "span" ) ); span.style.color = Q.bingo ? "blue" : "red" ; span.appendChild( document.createTextNode( Q.bingo ? "○" : "×" ) ); log.appendChild( document.createTextNode( A ) ); よろしくお願いします。

Lhankor_Mhy

2020/07/31 05:36

エラーメッセージは表示されていますか？開発者ツールでエラーメッセージを確認する方法がわからない場合は、その旨お知らせください。

m.ts10806

2020/07/31 05:43

答えをJavaScriptなりHTMLに持ってしまうと見れるのでクイズにならないかと思います

Lhankor_Mhy

2020/07/31 05:49

質問編集拝読。ブラウザ上で、エラーメッセージは表示されていますか？ブラウザの開発者ツールでエラーメッセージを確認する方法がわからない場合は、その旨お知らせください。

oreo_oreo

2020/07/31 05:49

そうなんですね… https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q12163476872 の入力バージョンを目指しているのですがソースコードをどのように書けばできますでしょうか？ご教授お願いいたします。

oreo_oreo

2020/07/31 05:50

ブラウザ上では特にエラーは表示されていませんが、ATOMでは写真のようなエラーが表示されています。

Lhankor_Mhy

2020/07/31 06:10

angular の記述がないように思うのですが、コピペ漏れですか？

oreo_oreo

2020/07/31 06:17 編集

Lhankor_Mhy

2020/07/31 06:19

なるほど。ではまず、angular の学習を進めてはいかがでしょうか？あと、大きなお世話だと思いますが、お書きになったHTMLもひどいと思いますので、JavaScriptを勉強する前にHTMLをしっかり学ぶことをおすすめします。

oreo_oreo

2020/07/31 06:20

アドバイスありがとうございます。 htmlの復習から初めてみます。

Lhankor_Mhy

2020/07/31 06:42

質問編集拝読。もし、まだ回答を求めているならば、Angular タグをつけてみてはどうでしょうか。あと、この補足欄の最後が、「htmlの復習から初めてみます」で終わっているので、「もう回答はいらないのかな？」的な空気になってると思いますから、「他の回答者щ(ﾟДﾟщ)ｶﾓｰﾝ」みたいなことを書いておいた方がいいのでは？

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

回答1件

ベストアンサー

angularはよく知らないのですがザッとみるにタグがきちんと閉じられてないから機能しないのではないでしょうか？
（<div>...</div>みたくしないとidとか指定してもどこからどこまでかわからない。）
あとcenterとかいうタグも閉じられてるように見えないし、HTML5では廃止されたような気もします。
まずはHTMLソースコードに対し整形インデントしてみてはいかがでしょうか？

投稿2020/07/31 09:35