selectの値の取得、selectの値とinputの値が混ざった計算

###selectで選んだ演算子を反映させた上で、inputに入力した値と合わせた式を計算して答えを表示したいです。

HTML
1
2

JavaScript
1
2

いろいろ試行錯誤して迷走してしまったので、見当違いのことをしてしまってるかもしれません…。まず「selectの取得」について理解が曖昧で、仮に取得できたとしても演算子とinputの値が混ざった計算の書き方が分かりません。指針だけでも教えていただけたら助かります…！回答よろしくお願い致します。

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

回答3件

HTMLをかえない前提で

投稿2020/07/31 00:49

yambejp

総合スコア116724

yambejp

2020/07/31 00:50

yambejp

2020/07/31 00:50

いろんな例外処理やエラー処理をはしょっているので、想定にあわせて改修が必要です

momomomon

2020/07/31 12:42

正常に実行されました！とても参考になりました。ありがとうございます！！

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

selectを使う場合、optionにvalue属性と一意の属性値をつけて、その値を取得して分岐させるのがセオリーです。

投稿2020/07/30 22:54

m.ts10806

総合スコア80875

momomomon

2020/07/30 22:57

HTMLは変えないでjavascriptのみの変更で書きたいのですが、その場合はどうなるのでしょうか…？

m.ts10806

2020/07/30 23:23

https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedIndex から選択されたエレメントを特定して、 https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML ただ、手順が増えるとコードも増えてバグが混入しやすくなるので、手順を増やさない簡潔な記述を選択するのもコーディング前に考えておくべきことかと思います。

momomomon

2020/07/31 12:42

正常に実行されました！とても参考になりました。ありがとうございます！！

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

ベストアンサー

アウトプットのため作成。とりあえず
半角数字以外(-.+は除く)を打ち込むとエラーが出るようにしてみました。
2進数や8進数16進数も対応しているみたいです。

Javascript
1        const first = document.getElementById("q6-1");
2        const second = document.getElementById("q6-2");
3        const btn = document.getElementById("q6-btn");
4        const result = document.getElementById("q6result");
5
6        btn.addEventListener("click", () => {
7            const select = document.getElementById("op6").value;
8            const fNum = Number(first.value)
9            const sNum = Number(second.value)
10            if (fNum && sNum) {
11                switch (select) {
12                    case "＋":
13                        result.innerText = fNum + sNum;
14                        break;
15                    case "‐":
16                        result.innerText = fNum - sNum;
17                        break;
18                    case "×":
19                        result.innerText = fNum * sNum;
20                        break;
21                    case "÷":
22                        result.innerText = fNum / sNum;
23                        break;
24                }
25            } else {
26                result.innerText = "エラー";
27            }
28        });

小数の計算などの処理を追加
なんだか酷いことに

Javascript
1        const first = document.getElementById("q6-1");
2        const second = document.getElementById("q6-2");
3        const btn = document.getElementById("q6-btn");
4        const result = document.getElementById("q6result");
5
6        btn.addEventListener("click", () => {
7            const fVal = first.value;
8            const sVal = second.value;
9            const fNum = Number(fVal);
10            const sNum = Number(sVal);
11            if (fVal.match(/^-?[0-9]+.[0-9]+$/) || sVal.match(/^-?[0-9]+.[0-9]+$/)) {
12                changeInteger(fVal, sVal);
13            }
14            else if (Number.isInteger(fNum) && Number.isInteger(sNum)) {
15                result.innerText = calc(fNum, sNum);
16            } else {
17                result.innerText = "エラー";
18            }
19        });
20
21        const calc = (num1, num2) => {
22            const select = document.getElementById("op6").value;
23            switch (select) {
24                case "＋":
25                    return num1 + num2;
26                    break;
27                case "‐":
28                    return num1 - num2;
29                    break;
30                case "×":
31                    return num1 * num2;
32                    console.log(num1 * num2);
33                    break;
34                case "÷":
35                    if (num2 === 0) { return "エラー" }
36                    else {
37                        return num1 * 10000 % num2 === 0 ? num1 / num2
38                            : Math.trunc(num1 / num2) + "余り" + num1 % num2;
39                    }
40                    break;
41            }
42        }
43
44        const changeInteger = (num1, num2) => {
45            const num1DotLen = num1.indexOf(".") === -1 ? 0 : num1.split(".")[1].length;
46            const num2DotLen = num2.indexOf(".") === -1 ? 0 : num2.split(".")[1].length;
47            const num1Rep = num1.indexOf(".") === -1 ? num1 : num1.replace(".", "");
48            const num2Rep = num2.indexOf(".") === -1 ? num2 : num2.replace(".", "");
49            if (num1DotLen > num2DotLen) {
50                const digit = num1DotLen - num2DotLen;
51                const num1 = addZero(0, num1Rep);
52                const num2 = addZero(digit, num2Rep);
53                changeDecimal(calc(num1, num2), num1DotLen, num2DotLen);
54            } else if (num2DotLen > num1DotLen) {
55                const digit = num2DotLen - num1DotLen;
56                const num1 = addZero(digit, num1Rep)
57                const num2 = addZero(0, num2Rep);
58                changeDecimal(calc(num1, num2), num2DotLen, num1DotLen);
59            } else {
60                const num1 = addZero(0, num1Rep);
61                const num2 = addZero(0, num2Rep);
62                changeDecimal(calc(num1, num2), num1DotLen, num1DotLen);
63            }
64        }
65
66        const addZero = (digit, num) => {
67            const zero = "0"
68            const number = Number(num + zero.repeat(digit));
69            return number;
70        }
71
72        const changeDecimal = (num, dot1, dot2) => {
73            const select = document.getElementById("op6").value;
74            if (select === "＋" || select === "‐") {
75                const answer = String(num).slice(0, String(num).length - dot1) + "." + String(num).slice(String(num).length - dot1);
76                if (answer.slice(0, 1) === ".") {
77                    result.innerText = 0 + answer
78                } else if (answer.slice(0, 2) === "-.") {
79                    result.innerText = answer.slice(0, 1) + "0" + answer.slice(1, answer.length)
80                } else {
81                    result.innerText = answer
82                }
83            }
84            if (select === "×") {
85                const zero = "0";
86                const add0 = String(num).match("-")
87                    ? "-" + zero.repeat(dot1 + dot2) + String(num).replace("-", "")
88                    : zero.repeat(dot1 + dot2) + String(num);
89                if (add0.match(/[0]*$/)) {
90                    const reg = new RegExp("[0]" + "{" + (dot1 - dot2) + "}$", "g");
91                    const regNum = add0.replace(reg, "");
92                    const answer = regNum.slice(0, regNum.length - (dot1 + dot2)) + "." + regNum.slice(regNum.length - (dot1 + dot2))
93                    result.innerText = Number(answer);
94                }
95            }
96            if (select === "÷") {
97                if (String(num).indexOf("余り") === -1) {
98                    result.innerText = num;
99                } else {
100                    const remainder = String(num).split("余り")[1];
101                    const remainderDot = remainder.slice(0, remainder.length - dot1) + "." + remainder.slice(remainder.length - dot1);
102                    if (remainderDot.slice(0, 1) === ".") {
103                        result.innerText = String(num).split("余り")[0] + "余り" + 0 + remainderDot;
104                    } else if (remainderDot.slice(0, 2) === "-.") {
105                        result.innerText = String(num).split("余り")[0] + "余り" + remainderDot.slice(0, 1) + "0" + remainderDot.slice(1, remainderDot.length)
106                    } else {
107                        result.innerText = String(num).split("余り")[0] + "余り" + remainderDot;
108                    }
109                }
110            }
111        }
112```。