計算して出た結果の数値を判定して、その結果が条件に合致しているか合否を出したい(2)

特定の計算に基づいて算出された結果が一定の範囲内の数値であれば合格、範囲外であれば不合格と表示させるプログラムを検討しています。
検索をしてみて、現在下記のように記載することで最初の計算結果を出すところまではたどり着けたのですが、その先の計算方法がイマイチわかりませんでした。

【実現したいこと】
1）項目A：入力欄A1～A3の平均値((A1 + A2 + A3) / 3)を算出、項目B：入力欄B1～B3の平均値((B1 + B2 + B3) / 3)を算出(ここまでは実現済み)
2） 1）で出た平均値Aに指定の定数(下記参照)を掛け合わせた数値をそれぞれ判別結果1～3に表示(実現できておらず)
3）平均値Bの値が前述の判別結果1～3の範囲内であれば判定欄に合格と表示、1つでも範囲外になっていれば不合格と表示(実現できておらず)

【テーブルのイメージ】
| No. | 項目A | 項目B || 項目C |
| :-----: | --- | ----- | --- |
|1|入力欄A1|入力欄B1|判別1|判別結果1|
|2|入力欄A2|入力欄B2|判別2|判別結果2|
|3|入力欄A3|入力欄B3|判別3|判別結果3|
|平均|平均値A|平均値B|判定|合格 / 不合格|

【各種数値の条件】
・入力欄A1～A3、B1～B3：小数点以下第3位まで入力
・平均値A = (入力欄A1 + 入力欄A2 + 入力欄A3) / 3 ：小数点以下第1位まで表示
・平均値B = (入力欄B1 + 入力欄B2 + 入力欄B3) / 3 ：小数点以下第1位まで表示
・判別結果1 = 平均値A * 定数1(例：1.5) ：小数点以下第1位まで表示
・判別結果2 = 平均値A * 定数2(例：2.0) ：小数点以下第1位まで表示
・判別結果3 = 平均値A * 定数3(例：2.5) ：小数点以下第1位まで表示
・判定 = 平均値Bの値(例：100)が判別結果1～3の間(例：90～120)であれば合格、条件を外れていたら(例：85)不合格と表示

html
1      <div class="aaa">
2        <ul class="w10">
3          <li class="">No.</li>
4          <li class="">1</li>
5          <li class="">2</li>
6          <li class="">3</li>
7          <li class="">平均</li>
8        </ul>
9
10
11        <form class="w28" oninput="op2.value = ((Number(rw_a.value) + (Number(rw_b.value) + Number(rw_c.value))) / 3).toFixed(1);">
12          <ul class="">
13            <li class="">項目A</li>
14            <li class=""><input type="number" name="rw_a" value="0"></li>
15            <li class=""><input type="number" name="rw_b" value="0"></li>
16            <li class=""><input type="number" name="rw_c" value="0"></li>
17            <li class=""><output name="op2">00</output></li>
18          </ul>
19        </form>
20
21
22        <form class="w28" oninput="op3.value = ((Number(cs_a.value) + (Number(cs_b.value) + Number(cs_c.value))) / 3).toFixed(1);">
23          <ul class="">
24            <li class="">項目B</li>
25            <li class=""><input type="number" name="cs_a" value="0"></li>
26            <li class=""><input type="number" name="cs_b" value="0"></li>
27            <li class=""><input type="number" name="cs_c" value="0"></li>
28            <li class=""><output name="op3">00</output></li>
29          </ul>
30        </form>
31
32
33        <ul class="w34">
34          <li class="">項目C</li>
35          <li class="w14">判別1</li>
36          <li class="w20"><span>00</span></li>
37          <li class="w14">判別2</li>
38          <li class="w20"><span>00</span></li>
39          <li class="w14">判別3</li>
40          <li class="w20"><span>00</span></li>
41          <li class="w14">判定</li>
42          <li class="w20"><span>合格</span></li>
43        </ul>
44      </div>

CSS
1      li {
2        list-style-type: none;
3        padding: 0;
4        margin: 0;
5      }
6      .aaa {
7        display: flex;
8        width: 100%;
9      }
10      .w10 {
11        width: 10%;
12      }
13      .w14 {
14        float: left;
15        width: 30%;
16      }
17      .w20 {
18        float: left;
19        width: 70%;
20      }
21      .w28 {
22        width: 28%;
23      }
24      .w34 {
25        width: 34%;
26      }
27

if文を使って条件分岐をさせるのだろうということくらいは予想しているのですが、
出てきた計算結果をどのように読み込ませればいいか、その辺がよくわかっていません。
js勉強中のため、そもそも基本的なところから間違っている可能性もありますが、知恵をお貸し幸いです

kei344

2019/11/24 04:04

JavaScriptが質問文に無いので、追記してください。

kei344

2019/11/24 04:06

oninputに詰め込んでいるのですね、失礼しました。

行動規範の内容に同意します

回答1件

ベストアンサー

出てきた計算結果をどのように読み込ませればいいか、その辺がよくわかっていません。

CSS のセレクタを使って、HTMLの「要素」を扱いやすくするメソッドがあります。

document.querySelector();
document.querySelectorAll();

js勉強中のため、そもそも基本的なところから間違っている可能性もあります

間違ってはいないですが、関数にまとめる方法もあります。
HTMLの form にも name属性を与えて、関数の引数に渡す例です

HTML
1:
2<form class="w28" name="rw" oninput="calcAverage(rw);">
3
4:
5<form class="w28" name="cs" oninput="calcAverage(cs);">

また、データを扱う場合、配列も覚えると、No1 ~ No4 など、入力項目が増えるような事例に対応しやすいと思います。

javascript
1// HTML のイベントから form[name] を渡す
2var calcAverage = function(form) {
3  var fields = Array.from(form.querySelectorAll("input"));
4  var ary = fields.map(function(f){
5    return Number(f.value);
6  });
7  var sum = ary.reduce(function(p,c){
8    return p+c;
9  }, 0 );
10  form.querySelector("output").value = (sum/ary.length).toFixed(1);
11
12  //doJudge();
13}