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

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

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

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

Q&A

解決済

1回答

1924閲覧

If文の条件式の中で配列を使う方法について教えてください。

Prog.Practice

総合スコア3

if

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

配列

配列は、各データの要素(値または変数)が連続的に並べられたデータ構造です。各配列は添え字(INDEX)で識別されています。

0グッド

0クリップ

投稿2021/05/28 07:55

前提・実現したいこと

トラブルシューティングをしてくれるツールを作成しています。

切り分け用の質問 (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">
<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>
</body> </html>

######【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での展開を予定しています。

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

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

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

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

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

guest

回答1

0

ベストアンサー

if(JudgeGoal == "除外"){

JudgeGoal"Judge.Unpaid" または "Judge.Faucet" または "Judge.Pipe" という文字列なので、"除外"と比較すると当然elseに行きますね。

やりたいことは、if (Judge[Goal] == "除外") { でしょうか?

投稿2021/05/28 08:09

int32_t

総合スコア21012

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

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

Prog.Practice

2021/05/28 09:07

迅速なご回答ありがとうございます! やりたいことは、まさにそれでした。 ここ数日ずーーーっとハマっていたので、大変助かりました! 今後もこちらの方法を活用させていただきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.46%

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

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

質問する

関連した質問