前提・実現したいこと
トラブルシューティングをしてくれるツールを作成しています。
切り分け用の質問 (3問)※今後追加予定です。
切り分け用の選択肢 (はい/いいえ/わからない)
考えられる原因 (料金未納/蛇口の故障/水道管のトラブル)
利用者が質問についてラジオボタンを選択することで、
原因となる事柄の可能性を絞り込んでいくような動きを想定しています。
現在なんとか動くJavascriptを書けたのですが、
今後の質問追加に備えて、配列やfor文を使ってコードをまとめたいです。
しかしながら、色々試していますが思うような結果を得ることが出来ません。
お知恵をお貸しいただけますと幸いです。
よろしくお願いいたします。
発生している問題・エラーメッセージ
If文の条件式が意図している動作とならず、すべてelse文の動作になってしまいます。
該当のソースコード
######【問題のJavascript】
let GoalArray = [Unpaid
,Faucet
,Pipe
];
let JudgeGoalArray = [Judge.Unpaid
,Judge.Faucet
,Judge.Pipe
];
for (let i = 0; i < GoalArray.length; i++){ let Goal = GoalArray[i]; let JudgeGoal = JudgeGoalArray[i]; console.log(JudgeGoal); if(JudgeGoal == "除外"){ console.log(Goal+" 除外されています"); document.getElementById(Goal).classList.add("ZeroPossibility"); } else { console.log(Goal+" 表示されています"); document.getElementById(Goal).classList.remove("ZeroPossibility"); } }
######【現在のJavascript】
document.getElementById("TroubleshootingQuestions").addEventListener("change", () => {
let Judge = {Unpaid:"", Faucet:"", Pipe:""}; const ResponseAndProcess = [ {Response:"A1Yes", Omit:["Unpaid"]}, {Response:"A1No", Omit:["Faucet","Pipe"]}, {Response:"A2Yes", Omit:["Faucet"]}, {Response:"A2No", Omit:["Unpaid","Pipe"]}, {Response:"A3Yes", Omit:["Pipe"]}, {Response:"A3No", Omit:["Unpaid","Faucet"]}, ]; for (let i=0; i<ResponseAndProcess.length; i++) { if (document.getElementById(ResponseAndProcess[i].Response).checked) { for (let j=0; j<ResponseAndProcess[i].Omit.length; j++) { Judge[ResponseAndProcess[i].Omit[j]] = "除外"; } } } if (Judge.Unpaid == "除外") { document.getElementById("Unpaid").classList.add("ZeroPossibility"); } else { document.getElementById("Unpaid").classList.remove("ZeroPossibility"); } if (Judge.Faucet == "除外") { document.getElementById("Faucet").classList.add("ZeroPossibility"); } else { document.getElementById("Faucet").classList.remove("ZeroPossibility"); } if (Judge.Pipe == "除外") { document.getElementById("Pipe").classList.add("ZeroPossibility"); } else { document.getElementById("Pipe").classList.remove("ZeroPossibility"); }
});
######【HTML】
<html lang="jp"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>問題切り分け</title> <link rel="stylesheet" href="水道切り分け.css"> <script type="text/javascript" src="水道切り分け.js" defer></script> </head> <body> <h1>水のトラブル発生時の質問</h1> <div id="TroubleshootingQuestions"></body> </html><div id="Q1"> <p>Q1.水道料金は支払っていますか?</p> <label><input type="radio" name="RadGrpA1" id="A1Yes">はい</label> <label><input type="radio" name="RadGrpA1" id="A1No">いいえ</label> <label><input type="radio" name="RadGrpA1">わからない</label> <label style=display:none><input type="radio" name="RadGrpA1" id=A1Unchecked checked>未選択</label> </div> <div id="Q2"> <p>Q2. 他の蛇口は水が出ますか?</p> <label><input type="radio" name="RadGrpA2" id="A2Yes">はい</label> <label><input type="radio" name="RadGrpA2" id="A2No">いいえ</label> <label><input type="radio" name="RadGrpA2">わからない</label> <label style=display:none><input type="radio" name="RadGrpA2" id=A2Unchecked checked>未選択</label> </div> <div id="Q3"> <p>Q3. お隣さんは水が出ますか?</p> <label><input type="radio" name="RadGrpA3" id="A3Yes">はい</label> <label><input type="radio" name="RadGrpA3" id="A3No">いいえ</label> <label><input type="radio" name="RadGrpA3">わからない</label> <label style=display:none><input type="radio" name="RadGrpA3" id=A3Unchecked checked>未選択</label> </div> </div> <div id="TroubleshootingCauseList"> <h1>想定される原因</h1> <p name="TroubleCause" id="Unpaid">料金未納</p> <p name="TroubleCause" id="Faucet">蛇口の故障</p> <p name="TroubleCause" id="Pipe">水道管のトラブル</p> </div>
######【CSS】
body {
background-color : rgb(241, 255, 240) ;
}
label, button, input {
cursor: pointer;
}
.ZeroPossibility {
background-color : rgb(177, 177, 177) ;
color: rgb(255, 255, 255);
}
試したこと
console.log(JudgeGoal);にて、配列の中身を正常に取れていることは確認できました。
補足情報(FW/ツールのバージョンなど)
VSCODEで作成しました。
完成したツールは、GoogleChromeでの展開を予定しています。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/05/28 09:07