質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
for

for文は、様々なプログラミング言語で使われている制御構造です。for文に定義している条件から外れるまで、for文内の命令文を繰り返し実行します。

if

if文とは様々なプログラミング言語で使用される制御構文の一種であり、条件によって処理の流れを制御します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

2回答

1236閲覧

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

leysxxk

総合スコア14

for

for文は、様々なプログラミング言語で使われている制御構造です。for文に定義している条件から外れるまで、for文内の命令文を繰り返し実行します。

if

if文とは様々なプログラミング言語で使用される制御構文の一種であり、条件によって処理の流れを制御します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/03/19 01:20

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 +"点";
}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2020/03/19 01:52 編集

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

2020/03/19 01:33

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

2020/03/19 02:33

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

回答2

0

ベストアンサー

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

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

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

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

js

1// 問題=questionは3問存在する、それをオブジェクトの配列にするとこんな感じになる 2var questions2 = [ 3 { 4 answers: ["q2_1"], // このIDが振ってあるチェックボックス全てにチェックが入っていれば正解 5 display: "ans2_1", // 正解・不正解はこのIDに返す 6 score: 10, // 配点、今回のケースは全て10点だが一応まとめた 7 }, 8 { 9 answers: ["q2_2"], 10 display: "ans2_2", 11 score: 10, 12 }, 13 { 14 answers: ["q2_3a", "q2_3b"], 15 display: "ans2_3", 16 score: 10, 17 }, 18]; 19 20// cul2の2の部分はここでは重要かもしれないが 21var cul2 = function (questions, result) { 22 // この中は2の内部と決まっている 23 // 1や2等の数字は読むのに邪魔なノイズになるので取り除いた 24 25 var score = 0; 26 for (var i = 0; i < questions.length; i++) { 27 var question = questions[i]; 28 29 // 正解したかを確認する 30 var isCorrect = true; 31 for (var j = 0; j < question.answers.length; j++) { 32 if (document.getElementById(question.answers[j]).checked) { 33 isCorrect = false; 34 break; 35 } 36 } 37 38 score += isCorrect ? question.score : 0; 39 document.getElementById(question.display).innerHTML = isCorrect ? "〇" : "×"; 40 } 41 42 document.getElementById(result).innerHTML = score + "点"; 43} 44 45// 2に関するものは外から注入するように変更 46// 今回は関数の引数を使った 47cul2(questions2, "total_2");

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

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

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

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


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

js

1const questions2 = [ 2 { 3 answers: ["q2_1"], // このIDが振ってあるチェックボックス全てにチェックが入っていれば正解 4 display: "ans2_1", // 正解・不正解はこのIDに返す 5 score: 10, // 配点、今回のケースは全て10点だが一応まとめた 6 }, 7 { 8 answers: ["q2_2"], 9 display: "ans2_2", 10 score: 10, 11 }, 12 { 13 answers: ["q2_3a", "q2_3b"], 14 display: "ans2_3", 15 score: 10, 16 }, 17]; 18 19const cul = function (questions, result) { 20 const results = questions.map(q => ({ 21 ...q, 22 isCollect: q.answers.every(a => document.getElementById(a).checked), 23 })); 24 results.forEach(r => { 25 document.getElementById(r.display).innerHTML = r.isCorrect ? "〇" : "×"; 26 }); 27 const score = results 28 .filter(r => r.isCollect) 29 .map(r => r.score) 30 .reduce((a, b) => a + b, 0); 31 document.getElementById(result).innerHTML = score + "点"; 32} 33 34cul2(questions2, "total_2");

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

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

投稿2020/03/19 02:58

編集2020/03/19 03:09
miyabi-sun

総合スコア21158

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

投稿2020/03/19 03:02

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問