JavaScriptの条件分岐について(yes noチャート)で悩んでおります。 Q1は2択(ab)

解決済

質問者：h_6812_h
質問日時：2023/04/15 11:44
回答数：5件

JavaScriptの条件分岐について(yes noチャート)で悩んでおります。

Q1は2択(ab)
Q2は3択(abc)
Q3は3択(abc)

で、選択ごとの分岐の仕方がわかりません。
jsの初心者すぎて申し訳ございません。
ご教授いただきたくお願いいたします。

質問項目ごとにidかclassを付けて、caseで判断させればいいのかなというところまでは認識できたのですが、その書き方もわかりません。。。よろしくお願い致します。

補足日時：2023/04/15 13:35
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (5件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.3ベストアンサー

回答者： fujillin
回答日時：2023/04/17 00:04

No1です。

＞jsでその書き方がわからずご教授いただければ、
書き方は考え方によって様々ですし、文書構成も何もない状態で記述できるものでもありません。
汎用化したスクリプトを作ることも可能ですが、そちらの方が固定的なものより遥かに難しくなります。
ですので、例示したところでそれが唯一の記述法でもありませんし、応用できるものとも思えません。

＞質問項目ごとにidかclassを付けて、caseで判断させればいいのかなというところまでは～
同じ様な処理をするのなら、個々にIDなどを付けて個別に処理するような方式では効率が悪と考えられます。
多少なりとも一般化して、文書構造を利用して処理できるようにしておいた方が宜しいように感じます。

などと言っていたのでは、ミもフタも無いので・・・
以下に例示はしておきますけれど、多分、使い物にはならないだろうと思います。

以下は、各フィールド毎に、何番目の選択肢が選択されているかを表示するだけのものです。
（右上に選択番号が表示されます）

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
fieldset { border-radius: 6px; margin-bottom: 1.2em; position: relative; }
legend { padding: 0 .6em; }
legend span { position: absolute; right: 1.6em;
background-color: white; padding: 0 0.6em; }
label + label { margin-left: 1.2em; }
</style>
</head>

<body>
<div id="wrap">
<fieldset>
<legend>選択項目 1<span>選択：<b> </b></span></legend>
<label><input type="radio" name="C1">choice 1-1</label>
<label><input type="radio" name="C1">choice 1-2</label>
</fieldset>

<fieldset>
<legend>選択項目 2<span>選択：<b> </b></span></legend>
<label><input type="radio" name="C2">choice 2-1</label>
<label><input type="radio" name="C2">choice 2-2</label>
<label><input type="radio" name="C2">choice 2-3</label>
</fieldset>

<fieldset>
<legend>選択項目 3<span>選択：<b> </b></span></legend>
<label><input type="radio" name="C3">choice 3-1</label>
<label><input type="radio" name="C3">choice 3-2</label>
<label><input type="radio" name="C3">choice 3-3</label>
<label><input type="radio" name="C3">choice 3-4</label>
</fieldset>
</div>

<script>
document.getElementById('wrap').addEventListener('change', e => {
const t = e.target, f = t.closest('fieldset');
if(t.nodeName != 'INPUT' || t.type != 'radio') return;
const n =[... f.querySelectorAll('input')].indexOf(t);
f.querySelector('legend b').textContent = n + 1;
});
</script>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

fujillin様
jsなどは、仰る通り様々な書き方があるとは存じますが、何から形にしていいかもこんがらがってしまい、他の方の似たような質問を漁り続けて未だ悩んでおりました。
そんな時にご丁寧にご教授いただき大変嬉しいです！本当にありがとうございます！
本来、ある程度カタチにした状態で質問できればと思うのですが、申し訳ございません。
今手元にPCがないので、明日やってみます！
貴重なお時間を割いていただきありがとうございました。いただいた内容を勉強させていただきます。

通報する

お礼日時：2023/04/17 00:24

No.5

回答者： Ogre7077
回答日時：2023/04/17 19:20

YES/NO チャートの様に質問をするウェブページの簡単な実装例

<form onsubmit="handleNext(event)">
<h2 id=qttl></h2> <ul id=qopt></ul> <button type=submit>次へ</button>
</form>
<script>
const QUESTIONS = { 0:["入浴するか","1:応","2:やだ"], 1:["サウナは好きか","3:応","2:やだ","4:ちょっとなら"], 2:"さようなら", 3:"△△湯", 4:"○○温泉" };
changePage(0);
/// 指定の質問でページを書き換える
function changePage(questionNo) {
var Q = s => document.querySelector(s);
var q = QUESTIONS[questionNo];
if (typeof q == "string") {
Q("#qttl").textContent = q;
Q("#qopt").innerHTML = "";
} else if (q) {
const LI = '<li><label><input type=radio name=q value="$1">$2</label></li>';
Q("#qttl").textContent = q[0];
Q("#qopt").innerHTML = q.slice(1).map(o => o.replace(/^(\w):(.+)/, LI)).join("\n");
}
}
/// 次へボタンを押した
function handleNext(event) {
event.preventDefault();
var no = 0, form = event.target, e = form.elements["q"];
if (e && !e.value) return;
if (e) no = e.value;
changePage(no);
}
</script>

余談ではありますが、
ウェブページを扱いたいなら JS と一緒に API も習いましょう。
https://developer.mozilla.org/ja/docs/Web/API/Do …

例) 実装例にてページを書き換える為に使う API
https://developer.mozilla.org/ja/docs/Web/API/Do …
https://developer.mozilla.org/ja/docs/Web/API/No …
https://developer.mozilla.org/ja/docs/Web/API/El …

例) 実装例にて HTML フォームを次へ処理に転用するために使う API
https://developer.mozilla.org/ja/docs/Web/API/Ev …
https://developer.mozilla.org/ja/docs/Web/API/HT …
https://developer.mozilla.org/en-US/docs/Web/API …

- 0
- 件

通報する

この回答へのお礼

Ogre7077様
実装例と、たくさんの参考ページまでご教授いただきありがとうございます！
質問がおおまかで簡潔にできておらず申し訳ございません。
いただいたページからもっと勉強して、回答いただける方にもちゃんと伝わる質問ができるよう頑張ります。
ありがとうございました。
一度また質問の仕方を考えて出直します。
ありがとうございました。

通報する

お礼日時：2023/04/17 20:46

どう思う？

No.4

回答者： cametan_42
回答日時：2023/04/17 14:52

そもそもyes no チャートって何だろ?

定義が曖昧なまま仕様を進める、って事が既に危険な気がしてるんだけど。

一般的に「yes no チャート」、って単語で想像するのって後述の写真のようなブツにならない?
つまり、Q1も2も3も「全部二択じゃなきゃいけない」筈なんだけど、質問文は途中から三択になってる。
想定してるモノがそもそも「伝わってない」、あるいは「一般的には伝わりづらい」って事にならんか?

それから、

> 選択ごとの分岐の仕方がわかりません。

とは言うけど、題意的な話で言うと、「Yes No チャート」で検索するよか、「木構造」で検索すべきなんじゃないか。

> jsの初心者すぎて申し訳ございません。

っつーのは関係ない。言っちゃえばjsそのものたぁあんま関係ない話だ。

木構造(データ構造):
https://ja.wikipedia.org/wiki/%E6%9C%A8%E6%A7%8B …

プログラミングがどーの、って言うよりもデータ設計の話だと思う。
一般的にはJavaScriptで言うMapを使ってどう「データをデザインすっか」の話になるだろうし、

Map:
https://developer.mozilla.org/ja/docs/Web/JavaSc …

あるいは、本当にデータ設計・・・僕自身はそれほどJavaScriptには明るくないんだけど、JSONを使ってどうデータを書き込むのか、って程度の話に過ぎないような気がする。

JSON:
https://products.sint.co.jp/topsic/blog/json

- 0
- 件

通報する

この回答へのお礼

条件分岐の作り方の質問だったのですが、、、
また改めて質問し直すことに致しました。
見ていただき、お時間を割いてくださり感謝いたします。また何かの際にはよろしくお願い致します。

通報する

お礼日時：2023/04/17 20:49

No.2

回答者： taglet
回答日時：2023/04/15 13:45

まずは自分でわかる部分のプログラムを作って、その上で質問してください。

- 0
- 件

通報する

この回答へのお礼

実はさらに詳細に書いた質問がありまして、、、

jsで診断コンテンツのページ内切り替えについて
という内容なんですが、
回答がつきにくいかと感じまして、こちらにも別で質問した次第です。

もしよろしければ、ご教授のほどよろしくお願いいたします。

通報する

お礼日時：2023/04/15 14:09

参考程度に

No.1

回答者： fujillin
回答日時：2023/04/15 13:26

こんにちは

javascriptに限った話ではありませんけれど、例えば3項目ある場合として

◇一択しかできない場合
1～3のどの項目が選択されているかを調べれば、例えば1～3通りの分岐が可能です。

◇複数選択可能な場合
値は、yes、noの2値なので、
[no,no,no]、[no,no,yes]、[no,yes,yes]・・・・
のように合計8通りの選択状態が考えられます。
全部を分岐したいのなら、まず、この1～8通りに分類すれば宜しいかと。