【JS】演算子の連続入力を阻止したい

現在、こちらの記事（参考ページ）をもとに、
Javascriptにて電卓の作成をしています。

しかしながら演算子が連続で押下できてしまいます。
それを阻止したく試行錯誤しましたが、上手く作用しません。

どう直したらいいのでしょうか。

HTML
1<!DOCTYPE html>
2    <html lang="en">
3      <head>
4        <meta charset="utf-8">
5        <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>  
6        <link rel="stylesheet" href="stylesheet.css">
7        <title>電卓</title>
8      </head>
9 
10      <body>
11        <form name="calculator">
12          <table>
13            <tr>
14              <td colspan="4">
15                <input type="text" class="display" name="display" value="" disabled>
16              </td>
17            </tr>
18
19            <tr>
20              <td><input type="button" value="7" onclick="get_calc(this)"></td>
21              <td><input type="button" value="8" onclick="get_calc(this)"></td>
22              <td><input type="button" value="9" onclick="get_calc(this)"></td>
23              <td><input type="button" value="+" class="operator1" id="operator" onclick="get_calc(this)" disabled></td>
24            </tr>
25
26            <tr>
27              <td><input type="button" value="4" onclick="get_calc(this)"></td>
28              <td><input type="button" value="5" onclick="get_calc(this)"></td>
29              <td><input type="button" value="6" onclick="get_calc(this)"></td>
30              <td><input type="button" value="-" class="operator1" onclick="get_calc(this)"></td>
31            </tr>
32
33            <tr>
34              <td><input type="button" value="1" onclick="get_calc(this)"></td>
35              <td><input type="button" value="2" onclick="get_calc(this)"></td>
36              <td><input type="button" value="3" onclick="get_calc(this)"></td>
37              <td><input type="button" value="*" class="operator1" name="multi_btn" onclick="get_calc(this)"></td>
38            </tr>
39
40            <tr>
41              <td><input type="button" value="0" onclick="get_calc(this)"></td>
42              <td><input type="button" value="00" onclick="get_calc(this)"></td>
43              <td><input type="button" value="." onclick="get_calc(this)"></td>
44              <td><input type="button" value="/" class="operator1" name="div_btn" onclick="get_calc(this)"></td>
45            </tr>
46
47            <tr>
48              <td colspan="2"><input type="button" value="AC" class="operator2" onclick="get_calc(this)"></td>
49              <td colspan="2"><input type="button" value="=" class="operator2" onclick="get_calc(this)"></td>
50            </tr>
51          </table>
52        </form>
53
54        <script src="main.js"></script>
55      </body>
56    </html>

JS
1function get_calc(btn) {
2    if(btn.value == "=") {
3        document.calculator.display.value = eval(document.calculator.display.value);
4    } else if (btn.value == "AC") {
5        document.calculator.display.value = "";
6    } else {
7        document.calculator.display.value += btn.value;
8        document.calculator.display.multi_btn.value = "*";
9        document.calculator.display.div_btn.value = "/";
10    }
11}

takasima20

2022/04/18 14:08

押されたボタンが演算子で、直前に入力されたのが演算子だったら後者を前者と入れ替えるとか?

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

回答3件

2*-2とか考えると演算子の連続入力は必要な場合もありそうです

投稿2022/04/19 00:13

編集2022/04/19 00:15

yambejp

総合スコア117940

回答いただいたみなさま、迅速なご対応ありがとうございました。
おかげさまで連続入力がなく計算ができ、解決いたしました。
より具体的な内容でご返答いただきました、5ugarVVatch1ng様の回答をBAとさせていただきました。

本当にありがとうございました。

投稿2022/04/19 04:11

tori-falfa

総合スコア16

ベストアンサー

こんな感じ

js
1// 四則演算の正規表現
2const operatorReg = /^(\+|-|\*|\/)$/;
3
4// 数の正規表現
5const numReg = /^([0-9]|00)$/;
6
7// 小数点が追加できるか否か
8// ひとつの数値に2つ以上の小数点が存在するか見ている。
9// 「3.1.4」みたいな数は不正だということ。
10let canAddDecimalPoint = true;
11
12function get_calc(btn) {
13   // 前回クリックしたボタン
14   const preValue = document.calculator.display.value.slice(-1);
15   // 追加する値
16   let value = btn.value;
17
18   if (value == ".") {
19      // 小数点がクリックされた場合
20
21      if (canAddDecimalPoint === false) return;
22      
23      if (preValue === "" || preValue === "." || operatorReg.test(preValue)) {
24         // 初期入力 または 前回クリックしたボタンが小数点 または 前回クリックしたボタンが四則演算の場合
25         // 何もしない。
26         return;
27      }
28
29      canAddDecimalPoint = false;
30   }
31   else if (numReg.test(value) === false) {
32      // 数以外がクリックされたら次から小数点入力可能
33      canAddDecimalPoint = true;
34   }
35
36   if (operatorReg.test(value) && operatorReg.test(preValue)) {
37      // 四則演算のボタンがクリックされた かつ 前回クリックしたボタンが四則演算の場合
38      // なんらかの処理を行う。
39      return; // これは仮。演算子を上書きたいなら、前の値を消す。
40   }
41
42   if (value == "00" && /^([0-9]|\.)$/.test(preValue) === false) {
43      // 00ボタンがクリックされたとき、前回クリックしたボタンが(数値または小数点)以外なら0とする。
44      value = "0"
45   }
46
47   if (value === "=") {
48      document.calculator.display.value = eval(document.calculator.display.value);
49   } else if (value === "AC") {
50      document.calculator.display.value = "";
51   } else {
52      document.calculator.display.value += value;
53   }
54}