JavaScriptで階層構造の質問がしたい

プログラミング初心者です。
JavaScriptで以下のような階層式の質問をしていき、末尾のDに応じて点数をつけたいです。

この際、ifとif elseを使って以下のようにズラズラと書いていくしか方法はないのでしょうか。

javascript
1  if (li.textContent === quizSet[0].c[0]){
2      li.classList.add('selected');
3      point += 23;
4    } else if (li.textContent === quizSet[0].c[1]){
5      li.classList.add('selected');
6      point += 18;
7    } else if (li.textContent === quizSet[0].c[2]){
8      li.classList.add('selected');
9      point += 16;
10    }
11

kei344

2019/08/12 19:46

HTMLおよびJavaScript全体を質問文に追記されたほうが回答を得やすいと思います。

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

回答2件

ベストアンサー

ソースが抜粋なんでよくわかんないけど、liってListItemですよねたぶん。

まずUIの要素と「データ」の部分は分離したほうが良いです。
UI要素に持っている「データ」を参照してロジックを書くと、UIに変更があるたびに処理を書き直すハメになります。

ここでいう「データ」として必要なのは「質問」とそれに付随する「ポイント、次の質問（のID）」みたいなので、それを表すデータを作りましょう。

そうして作ったデータは配列なりリストなりに格納しておけば、ループ処理でロジックを書けるので、ひとつひとつの「質問」をifで連結するような面倒なことはしなくてよくなります。

UI要素についても「データ」に応じて動的に画面に出力できるようにしましょう。

上記の内容が理解できないようであれば、入門書など読んでもうちょっと学習を進めてからトライしてください。

投稿2019/08/13 00:56

編集2019/08/13 01:14

gentaro

総合スコア8949

Bobby.

2019/08/13 02:43

ありがとうございます。ご指摘の通り、もう少し勉強してからトライしてみます。

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

質問の変更がなされないようなので、とりあえずアイデアを…

javascript
1  const s = {
2    A:{names:['B1','B2'], points:[10,11]},
3    B1:{names:['C1','C2'], points:[12,13]},
4    B2:{names:['C3','C4'], points:[14,15]},
5    C1:{names:['D1','D2','D3'], points:[16,17,18]},
6    C2:{names:['D4','D5','D6'], points:[19,20,21]},
7    C3:{names:['D7','D8','D9'], points:[22,23,24]},
8    C4:{names:['D10','D11'], points:[25,26]},
9    D1:{names:[], points:[]},
10    D2:{names:[], points:[]},
11    D3:{names:[], points:[]},
12    D4:{names:[], points:[]},
13    D5:{names:[], points:[]},
14    D6:{names:[], points:[]},
15    D7:{names:[], points:[]},
16    D8:{names:[], points:[]},
17    D9:{names:[], points:[]},
18    D10:{names:[], points:[]},
19    D11:{names:[], points:[]}};