初めてJqueryで診断ツールを作っておりますが、どうしても動作しません。

Jqieryを動作をさせたいのですができません。

初めての質問になります。
そして、初めてJqueryでプログラムを組んでいます。

現在、１５の質問をyes,no形式で答えていき、その回答の結果によって５つのタイプに分類される
という診断ツールを作っております。

計算に関しては
Aタイプの回答が多ければA
Bタイプの回答が多ければB

というようにするのですが、
仮にテスト結果の回答数が同じであれば
Aから順に若いものから表示します。

実行をしても動作しないのでお手上げ状態になってしましました。
まずは動作させるようにしたいです。

どなたか、お力をお貸しいただけると助かります。
よろしくお願いいたします。

html
1<!---m.ts10806様ご指摘の追記>
2<!doctype html>
3<html　lang="ja">
4<head>
5<meta charset="UTF-8">
6<meta http-equiv="X-UA-Compatible" content="IE=edge">
7<!---m.ts10806様ご指摘の追記、終わり>
8<title>診断テスト</title>
9<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
10<link rel="stylesheet" href="css/reset.css"><!--リセット-->
11<link rel="stylesheet" href="css/style.css">
12<!--jQuery本体-->
13<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
14<!--自分で作るjQueryプログラム-->
15<script src="selfjs.js"></script>
16<div id="wrapper">
17<div class="question">
18<h1>愛着スタイル診断</h1>
19<!--１５の質問 -->    
20<ul>
21<li>
22<span>Q1. とてもいい人だと思っていたのに、幻滅したり、嫌いになったりすることがありますか。</span><br />
23 <input type="radio" name="q01" id="q01" class="typeA"/>
24 <label for="q01" class="s-label">YES</label>
25<input type="radio" name="q01" id="q02" class="typeE"/>
26 <label for="q02" class="s-label">NO</label><br />
27 </li>
28 <li>
29   <span>Q2. よくイライラしたり、落ち込んだりする方ですか。</span><br />
30   <input type="radio" name="q02" id="q03" class="typeA"/>
31 <label for="q03" class="s-label">YES</label>
32 <input type="radio" name="q02" id="q04" class="typeB"/>
33  <label for="q04" class="s-label">NO</label><br />
34   </li>
35   <li>
36     <span>Q3. 自分にはあまり取り柄がないと思うことがありますか。。</span><br />
37   <input type="radio" name="q03" id="q05" class="typeA"/>
38 <label for="q05" class="s-label">YES</label>
39<input type="radio" name="q03" id="q06" class="typeE"/>
40 <label for="q06" class="s-label">NO</label><br />
41  </li>
42   <li>
43  <span>Q4. 人の観察をしたり、周りのことを気に留める方だ。</span><br />
44 <input type="radio" name="q04" id="q07" class="typeB"/>
45<label for="q07" class="s-label">YES</label>
46<input type="radio" name="q04" id="q08" class="typeD"/>
47<label for="q08" class="s-label">NO</label><br />
48</li>
49<li>
50 <span>Q5. 拒絶されるのではないかと、不安になることがありますか。</span><br />
51<input type="radio" name="q05" id="q09" class="typeB"/>
52<label for="q09" class="s-label">YES</label>
53<input type="radio" name="q05" id="q10" class="typeA"/>
54<label for="q10" class="s-label">NO</label><br />
55</li>
56<li>
57<span>Q6.良いところより、悪いところの方が気になってしまいますか。</span><br />
58<input type="radio" name="q06" id="q11" class="typeB"/>
59<label for="q11" class="s-label">YES</label>
60<input type="radio" name="q06" id="q12" class="typeC"/>
61<label for="q12" class="s-label">NO</label><br />
62 </li>
63<li>
64 <span>Q7.人に頼らずに、決断したり行動したりできる方ですか。</span><br />
65<input type="radio" name="q07" id="q13" class="typeC"/>
66 <label for="q13" class="s-label">YES</label>
67<input type="radio" name="q07" id="q14" class="typeA"/>
68   <label for="q14" class="s-label">NO</label><br />
69 </li>
70<li>
71<span>Q8.自分はあまり人から愛されない存在だと思いますか。</span><br />
72<input type="radio" name="q08" id="q15" class="typeC"/>
73<label for="q15" class="s-label">YES</label>
74<input type="radio" name="q08" id="q16" class="typeB"/>
75<label for="q16" class="s-label">NO</label><br />
76<li>
77<span>Q9. 何か嫌いなことがあると、引きずってしまう方ですか。</span><br />
78<input type="radio" name="q09" id="q17" class="typeC"/>
79<label for="q17" class="s-label">YES</label>
80<input type="radio" name="q09" id="q18" class="typeB"/>
81<label for="q18" class="s-label">NO</label><br />
82</li>
83<li>
84 <span>Q10. 親しい対人関係は、あなたにとって重要ですか。</span><br />
85<input type="radio" name="q10" id="q19" class="typeA"/>
86<label for="q19" class="s-label">YES</label>
87<input type="radio" name="q10" id="q20" class="typeB"/>
88<label for="q20" class="s-label">NO</label><br />
89</li>
90<li>
91<span>Q11. いつも冷静でクールな方ですか。</span><br />
92 <input type="radio" name="q11" id="q21" class="typeD"/>
93<label for="q21" class="s-label">YES</label>
94<input type="radio" name="q11" id="q22" class="typeA"/>
95<label for="q22" class="s-label">NO</label><br />
96</li>
97<li>
98  <span>Q12. ０から１を生み出すことに向いていると思う。</span><br />
99<input type="radio" name="q12" id="q23" class="typeD"/>
100<label for="q23" class="s-label">YES</label>
101 <input type="radio" name="q12" id="q24" class="typeB"/>
102 <label for="q24" class="s-label">NO</label><br />
103</li>
104<li>
105 <span>Q13. 課題に挑戦し、クリアしたり、多少しんどくてもトライする事が楽しい。</span><br />
106<input type="radio" name="q13" id="q25" class="typeE"/>
107 <label for="q25" class="s-label">YES</label>
108 <input type="radio" name="q13" id="q26" class="typeA"/>
109<label for="q26" class="s-label">NO</label><br />
110</li>
111<li>
112<span>Q14. つまずくと、気持ちが萎えるどころか燃え上がってくる方だ。</span><br />
113 <input type="radio" name="q14" id="q27" class="typeE"/>
114<label for="q27" class="s-label">YES</label>
115 <input type="radio" name="q14" id="q28" class="typeB"/>
116<label for="q28" class="s-label">NO</label><br />
117</li>
118<li>
119<span>Q15. 前へ、前へと歩みを進める事が、とても楽しいと感じる。</span><br />
120 <input type="radio" name="q15" id="q29" class="typeE"/>
121<label for="q29" class="s-label">YES</label>
122<input type="radio" name="q15" id="q30" class="typeD"/>
123<label for="q30" class="s-label">NO</label><br />
124</li>
125 </li>
126</ul>
127<button id="button">診断する</button>
128</div>
129<!--未回答の質問 -->
130  <div class="result noAns">
131 <h2>
132   未回答の問題があります
133  </h2>
134  </div>
135<!--質問の答え-->    
136<div class="result resultA">
137  <h2>あなたの愛着スタイルは<br><strong>安定型</strong></h2>
138  <p>愛着不安、愛着回避とも低く、もっとも安定したタイプ</p>
139  </div>
140   <div class="result resultB">
141  <h2>あなたの愛着スタイルは<br><strong>不安型</strong></h2>
142  <p>愛着不安が強く、対人関係に敏感なタイプ</p>
143</div>
144  <div class="result resultC">
145<h2>あなたの愛着スタイルは<br><strong>回避型</strong></h2>
146 <p>愛着回避が強く、親密な関係になりにくいタイプ</p>
147  </div>
148<div class="result resultD">
149 <h2>あなたの愛着スタイルは<br><strong>回避－安定型</strong></h2>
150<p>愛着不安が強いが、ある程度適応力があるタイプ</p>
151</div>
152<div class="result resultE">
153<h2>あなたの愛着スタイルは<br><strong>未解決型</strong></h2>
154 <p>愛着不安、愛着回避とも強く、傷つくことに敏感で、疑り深くなりやすいタイプ</p>
155 </div>
156</div></body>
157</html>

jquery
1
2    console.log( div );
3
4   $(function(){
5  //ボタンがクリックされた時
6 $("button").click(function(){
7  //一度結果を非表示にする
8    $(".result").hide();
9　　alert("クリックされました");
10//問題数を取得
11 var qNum = jQuery(".ul li").length;
12if( $("ul li input:checked").length < qNum ){
13//全てチェックしていなかったらアラートを出す
14$(".noAns").fadeIn();
15 } else {
16 //チェックされているinputの数を取得
17    var typeANum = $(".typeA:checked").length,
18 typeBNum = $(".typeB:checked").length,
19typeCNum = $(".typeC:checked").length,
20typeDNum = $(".typeD:checked").length,
21typeENum = $(".typeE:checked").length,};
22//最大のタイプの個数
23maxType = Math.max(typeANum, typeBNum, typeCNum, typeDNum, typeENum);
24$(".resultPoint").fadeIn().html('<h2>あなたのポイント<br/>aタイプ:'+typeANum +'<br/>aタイプ:'+ typeBNum +'<br/>Bタイプ:'+ typeCNum +'<br/>Cタイプ:'+ typeDNum + '<br/>dタイプ:'+ typeENum + <br/>Eタイプ:'<br/>　<canvas id="myChart"></canvas>');
25 }
26  )};
27	//計算式
28if(typeANum >= typeBNum  && typeANum >= typeCNum && typeANum >= typeDNum && typeANum >= typeENum ) {
29 //Aタイプを表示
30$(".resultA").fadeIn()};
31} else if(typeBNum > typeANum  typeBNum > typeCNum typeBNum > typeDNum typeBNum > typeENum) {
32//Bタイプを表示
33$(".resultB").fadeIn()};
34} else if(typeCNum > typeANum typeCNum > typeBNum typeCNum > typeDNum && typeCNum > typeENum) {
35//Cタイプを表示
36 $(".resultC").fadeIn()};
37} else if(typeDNum > typeANum typeDNum > typeBNum && typeDNum > typeCNum && typeDNum > typeENum) {
38//Dタイプを表示
39$(".resultD").fadeIn()};
40} else if(typeENum > typeANum typeENum > typeBNum && typeENum > typeCNum && typeENum > typeDNum) {
41//Eタイプを表示
42$(".resultE").fadeIn()};}
43)};
44

m.ts10806

2020/04/26 04:01

HTMLだけ提示されても再現確認不可です。ライブラリ以外、自身で組んだものはすべて提示してください。ライブラリは公式URLとバージョンを記載願います。

rasuku

2020/04/26 04:33

ご回答ありがとうございます。１００００字の制限があったようで上手く投稿できてないようでした。ライブラリに関しては修正しました。バージョンはjquery 1.9.1です。よろしくお願いいたします。

kei344

2020/04/26 04:47

回答が付いた質問の編集は慎重に行ってください。質問文のコードについて回答にて指摘があった場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。後から見た人から見て、現在の回答が「無いコードに対しての指摘」になり、意味がわからなくなります。

m.ts10806

2020/04/26 05:01

インデントぐっちゃぐちゃですけど、本当にそのままですか？あと、HTMLにDoctypeはつけてないですか？

rasuku

2020/04/26 05:17

kei344様ご回答ありがとうございます。「追記すること」「直したことがわるようにすること」かしこまりました。ありがとうございます。

rasuku

2020/04/26 05:19

m.ts10806様ご回答ありがとうございます。インデントに関しましては、質問に10,000字の文字数制限がありまして、泣く泣くスペースを削って投稿しております。HTML、Doctypeのご指摘ありがとうございます。

m.ts10806

2020/04/26 05:25

んー、にしても動かないのは当たり前言えば当たり前で、ざっと見て明らかなのは下記のようなところ。 } else if(typeBNum > typeANum typeBNum > typeCNum typeBNum > typeDNum typeBNum > typeENum) { 並列の条件の間に&& とか orもないのでおかしいです。できればちゃんとコード全体見れた方がいいので、 GithubとかCodepenとか外部サービス使ってみてください。それか、HTML含めて最小構成のコードにするか、ですね。 >https://teratail.com/help/question-tips#questionTips3-5-1 最も良いのは、現象を再現するためのミニマムなプログラムを改めて作ることです。そうすれば、貴方自身が現象と問題をより良く理解することにもつながるからです。

退会済みユーザー

2020/04/26 05:48

質問のコードがそのまま書かれているのであれば、先頭の「console.log( div );」でdivが定義されていないのでエラーです（処理が止まります）。あと、クォーテーションで囲む場所や、括弧を閉じる位置がおかしな部分が多々あります。処理の上から、動くことを確認しながら書き直したほうが良いと思います。

rasuku

2020/04/27 07:57

m.ts10806様ご丁寧にありがとうございます。 Githubのアカウントを作ってみました。 https://github.com/yopico3828/yes-no-test/ まず、ご指摘くださっている部分を修正していきたいと思います。

rasuku

2020/04/27 08:02 編集

Lish様ご回答ありがとうございます。もう一度、確認しながら修正していきたいと思います。