こちらのコードはfor文で綺麗にまとめる方法はございますか

Question

var q2_1 = document.getElementById("q2_1");
var q2_2 = document.getElementById("q2_2");
var q2_3a = document.getElementById("q2_3a");
var q2_3b = document.getElementById("q2_3b");
var answer2_1 =document.getElementById("ans2_1");
var answer2_2 =document.getElementById("ans2_2");
var answer2_3 =document.getElementById("ans2_3");
var total2 =document.getElementById("total_2");

var cul2 = function (){
if (q2_1.checked) {
var n2_1 = 10;
answer2_1.innerHTML = "〇";
}else {
var n2_1 = 0;
answer2_1.innerHTML = "×";
}
if (q2_2.checked) {
var n2_2 = 10;
answer2_2.innerHTML = "〇";
}else {
var n2_2 = 0;
answer2_2.innerHTML = "×";
}
if (q2_3a.checked && q2_3b.checked) {
var n2_3 = 10;
answer2_3.innerHTML = "〇";
}else {
var n2_3 = 0;
answer2_3.innerHTML = "×";
}
var totalscore2 = n2_1 + n2_2 + n2_3;
total2.innerHTML = totalscore2 +"点";
}

Comments

[m.ts10806]

コードはマークダウンのcode機能を利用してご提示ください。
また、for使いたいのでしたら、まず自身がやってみたコードをご提示ください。
あと、できればこのコードの目的や要件をきちんと記載してください。
他人にコードだけ提示してそれで全部汲み取れと言うのは横暴です。
HTMLもご提示ください

[yambejp]

idの付け方と運用方法はこれがマストですか？
クラスとその他の属性でもっと楽にできそうですが・・・

[kei344]

（質問文は編集できます）HTMLおよびご自身で試したJavaScriptコードも提示してください。また、質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

こちらのコードはfor文で綺麗にまとめる方法はございますか

ございますが、HTMLを修正したほうが100倍くらい楽だと思います

for文で綺麗にループさせるには相応の配列が必要です。
Document.querySelectorAllでクラス名で引っ掛けるような仕組みにしておき、
HTML5のカスタムデータ属性から問題の機微を取得する仕組みにしておくのが楽でしょう。

まぁ、上記の問題は回答者への挑戦状みたいなものと想定して、
筋肉モリモリマッチョマンの変態みたいなパワープレイで解決するとこんな感じになります。

// 問題=questionは3問存在する、それをオブジェクトの配列にするとこんな感じになる
var questions2 = [
  {
    answers: ["q2_1"], // このIDが振ってあるチェックボックス全てにチェックが入っていれば正解
    display: "ans2_1", // 正解・不正解はこのIDに返す
    score: 10, // 配点、今回のケースは全て10点だが一応まとめた
  },
  {
    answers: ["q2_2"],
    display: "ans2_2",
    score: 10,
  },
  {
    answers: ["q2_3a", "q2_3b"],
    display: "ans2_3",
    score: 10,
  },
];

// cul2の2の部分はここでは重要かもしれないが
var cul2 = function (questions, result) {
  // この中は2の内部と決まっている
  // 1や2等の数字は読むのに邪魔なノイズになるので取り除いた

  var score = 0;
  for (var i = 0; i < questions.length; i++) {
    var question = questions[i];

    // 正解したかを確認する
    var isCorrect = true;
    for (var j = 0; j < question.answers.length; j++) {
      if (document.getElementById(question.answers[j]).checked) {
        isCorrect = false;
        break;
      }
    }

    score += isCorrect ? question.score : 0;
    document.getElementById(question.display).innerHTML = isCorrect ? "〇" : "×";
  }

  document.getElementById(result).innerHTML = score + "点";
}

// 2に関するものは外から注入するように変更
// 今回は関数の引数を使った
cul2(questions2, "total_2");

*コードは動作未検証なので動かなかったらごめんなさい

一番みていただきたいのは、
for文を回す為に配列を作っている箇所です。
3問目への対応が少々高難易度ですが、答えのチェックボックスを配列形式にして、
全てにチェックが入っていればヨシ！という作りにしました。

まぁ、更に正解・不正解判定が高難度になるのであれば、
answerの部分を更にオブジェクトにしてtypeみたいな項目で認識するという工夫で解決出来るでしょう。

こんな感じでオブジェクトの配列にしてループで回すという事をやれば、
多くの問題がループで解決出来るようになるのでこのパターンは是非覚えておいてくださいね。
(もちろんHTMLの見直しをすればこの手間が大幅に削減できます)

---

【おまけ】 ES2015の機能をフル稼働にするとこうなる

const questions2 = [
  {
    answers: ["q2_1"], // このIDが振ってあるチェックボックス全てにチェックが入っていれば正解
    display: "ans2_1", // 正解・不正解はこのIDに返す
    score: 10, // 配点、今回のケースは全て10点だが一応まとめた
  },
  {
    answers: ["q2_2"],
    display: "ans2_2",
    score: 10,
  },
  {
    answers: ["q2_3a", "q2_3b"],
    display: "ans2_3",
    score: 10,
  },
];

const cul = function (questions, result) {
  const results = questions.map(q => ({
    ...q,
    isCollect: q.answers.every(a => document.getElementById(a).checked),
  }));
  results.forEach(r => {
    document.getElementById(r.display).innerHTML = r.isCorrect ? "〇" : "×";
  });
  const score = results
    .filter(r => r.isCollect)
    .map(r => r.score)
    .reduce((a, b) => a + b, 0);
  document.getElementById(result).innerHTML = score + "点";
}

cul2(questions2, "total_2");

やってる内容は上のfor文と大体同じです。
複雑な分、読むのは大変ですね。

※HTMLが無いのでコードは全て未検証の一発書きです、エラーが出たらごめんなさい

Answer 2

[[q2_1], [q2_2], [q2_3a, q2_3b]]という配列を作ってfor ofの二重ループ。