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

Question

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

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

Answer 1

HTMLをかえない前提で

Comments

[yambejp]

window.addEventListener('DOMContentLoaded', ()=>{
document.querySelector('#q6-btn').addEventListener('click',()=>{
const v1=parseFloat(document.querySelector('#q6-1').value);
const v2=parseFloat(document.querySelector('#q6-2').value);
let v3=0;
switch(document.querySelector('#op6').selectedIndex){
case 0:
v3=v1+v2;
break;
case 1:
v3=v1-v2;
break;
case 2:
v3=v1*v2;
break;
case 3:
v3=v1/v2;
break;
}
document.querySelector('#q6result').textContent=v3;
});
});

[yambejp]

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

[momomomon]

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

Answer 2

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

Comments

[momomomon]

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

[m.ts10806]

https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedIndex
から
選択されたエレメントを特定して、
https://developer.mozilla.org/ja/docs/Web/API/Element/innerHTML

ただ、手順が増えるとコードも増えてバグが混入しやすくなるので、手順を増やさない簡潔な記述を選択するのもコーディング前に考えておくべきことかと思います。

[momomomon]

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

Answer 3

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

        const first = document.getElementById("q6-1");
        const second = document.getElementById("q6-2");
        const btn = document.getElementById("q6-btn");
        const result = document.getElementById("q6result");

        btn.addEventListener("click", () => {
            const select = document.getElementById("op6").value;
            const fNum = Number(first.value)
            const sNum = Number(second.value)
            if (fNum && sNum) {
                switch (select) {
                    case "＋":
                        result.innerText = fNum + sNum;
                        break;
                    case "‐":
                        result.innerText = fNum - sNum;
                        break;
                    case "×":
                        result.innerText = fNum * sNum;
                        break;
                    case "÷":
                        result.innerText = fNum / sNum;
                        break;
                }
            } else {
                result.innerText = "エラー";
            }
        });

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

        const first = document.getElementById("q6-1");
        const second = document.getElementById("q6-2");
        const btn = document.getElementById("q6-btn");
        const result = document.getElementById("q6result");

        btn.addEventListener("click", () => {
            const fVal = first.value;
            const sVal = second.value;
            const fNum = Number(fVal);
            const sNum = Number(sVal);
            if (fVal.match(/^-?[0-9]+.[0-9]+$/) || sVal.match(/^-?[0-9]+.[0-9]+$/)) {
                changeInteger(fVal, sVal);
            }
            else if (Number.isInteger(fNum) && Number.isInteger(sNum)) {
                result.innerText = calc(fNum, sNum);
            } else {
                result.innerText = "エラー";
            }
        });

        const calc = (num1, num2) => {
            const select = document.getElementById("op6").value;
            switch (select) {
                case "＋":
                    return num1 + num2;
                    break;
                case "‐":
                    return num1 - num2;
                    break;
                case "×":
                    return num1 * num2;
                    console.log(num1 * num2);
                    break;
                case "÷":
                    if (num2 === 0) { return "エラー" }
                    else {
                        return num1 * 10000 % num2 === 0 ? num1 / num2
                            : Math.trunc(num1 / num2) + "余り" + num1 % num2;
                    }
                    break;
            }
        }

        const changeInteger = (num1, num2) => {
            const num1DotLen = num1.indexOf(".") === -1 ? 0 : num1.split(".")[1].length;
            const num2DotLen = num2.indexOf(".") === -1 ? 0 : num2.split(".")[1].length;
            const num1Rep = num1.indexOf(".") === -1 ? num1 : num1.replace(".", "");
            const num2Rep = num2.indexOf(".") === -1 ? num2 : num2.replace(".", "");
            if (num1DotLen > num2DotLen) {
                const digit = num1DotLen - num2DotLen;
                const num1 = addZero(0, num1Rep);
                const num2 = addZero(digit, num2Rep);
                changeDecimal(calc(num1, num2), num1DotLen, num2DotLen);
            } else if (num2DotLen > num1DotLen) {
                const digit = num2DotLen - num1DotLen;
                const num1 = addZero(digit, num1Rep)
                const num2 = addZero(0, num2Rep);
                changeDecimal(calc(num1, num2), num2DotLen, num1DotLen);
            } else {
                const num1 = addZero(0, num1Rep);
                const num2 = addZero(0, num2Rep);
                changeDecimal(calc(num1, num2), num1DotLen, num1DotLen);
            }
        }

        const addZero = (digit, num) => {
            const zero = "0"
            const number = Number(num + zero.repeat(digit));
            return number;
        }

        const changeDecimal = (num, dot1, dot2) => {
            const select = document.getElementById("op6").value;
            if (select === "＋" || select === "‐") {
                const answer = String(num).slice(0, String(num).length - dot1) + "." + String(num).slice(String(num).length - dot1);
                if (answer.slice(0, 1) === ".") {
                    result.innerText = 0 + answer
                } else if (answer.slice(0, 2) === "-.") {
                    result.innerText = answer.slice(0, 1) + "0" + answer.slice(1, answer.length)
                } else {
                    result.innerText = answer
                }
            }
            if (select === "×") {
                const zero = "0";
                const add0 = String(num).match("-")
                    ? "-" + zero.repeat(dot1 + dot2) + String(num).replace("-", "")
                    : zero.repeat(dot1 + dot2) + String(num);
                if (add0.match(/[0]*$/)) {
                    const reg = new RegExp("[0]" + "{" + (dot1 - dot2) + "}$", "g");
                    const regNum = add0.replace(reg, "");
                    const answer = regNum.slice(0, regNum.length - (dot1 + dot2)) + "." + regNum.slice(regNum.length - (dot1 + dot2))
                    result.innerText = Number(answer);
                }
            }
            if (select === "÷") {
                if (String(num).indexOf("余り") === -1) {
                    result.innerText = num;
                } else {
                    const remainder = String(num).split("余り")[1];
                    const remainderDot = remainder.slice(0, remainder.length - dot1) + "." + remainder.slice(remainder.length - dot1);
                    if (remainderDot.slice(0, 1) === ".") {
                        result.innerText = String(num).split("余り")[0] + "余り" + 0 + remainderDot;
                    } else if (remainderDot.slice(0, 2) === "-.") {
                        result.innerText = String(num).split("余り")[0] + "余り" + remainderDot.slice(0, 1) + "0" + remainderDot.slice(1, remainderDot.length)
                    } else {
                        result.innerText = String(num).split("余り")[0] + "余り" + remainderDot;
                    }
                }
            }
        }
```。

Comments

[Jon_do]

追記
selectには閉じタグ</select>が必要で
inputには閉じタグ不要です。

[momomomon]

swich文を使うんですね！いろいろいじって同じように書いてみたら正常に実行されました。ありがとうございます…！