#はじめに

まだまだ未熟なコードだとは思いますが、
jsの勉強で電卓のプログラムを作成したので記録用に記します。

#イメージキャプチャ

#コード

html


<body>

    <p id="errormessage"></p>

    <div class="calculator">

    <table>

      <tr >
        <td colspan="4">
          <div class="head">
            <input id ="result" placeholder="0"/>
          </div>
        </td>
        </tr>

      <tr>
        <td colspan="2">
          <div class="col2">
            <button class="btn" onclick="update( '' ) ">clear</button>
          </div>
        </td>
        <td></td>
        <td>
          <div>
            <button onclick="btn('+')">+</button>
          </div>
        </td>
      </tr>

      <tr>
        <td>
          <div>
            <button onclick="btn('1')">1</button>
          </div>
        </td>
        <td>
          <div>
            <button onclick="btn('2')">2</button>
          </div>
        </td>
        <td>
          <div class="mr">
            <button onclick="btn('3')">3</button>
          </div>
        </td>
        <td>
          <div>
            <button onclick="btn('-')">-</button>
          </div>
        </td>
      </tr>

      <tr>
        <td>
          <div>
            <button onclick="btn('4')">4</button>
          </div>
        </td>
        <td>
          <div>
            <button onclick="btn('5')">5</button>
          </div>
        </td>
        <td>
          <div>
            <button onclick="btn('6')">6</button>
          </div>
        </td>
        <td>
          <div>
            <button onclick="calc2('*')">×</button>
          </div>
        </td>
      </tr>

      <tr>
        <td>
          <div>
            <button onclick="btn('7')">7</button>
          </div>
        </td>
        <td>
          <div>
            <button onclick="btn('8')">8</button>
          </div>
        </td>
        <td>
          <div>
            <button onclick="btn('9')">9</button>
          </div>
        </td>
        <td>
          <div>
            <button onclick="calc2('/')">÷</button>
          </div>
        </td>
      </tr>

      <tr>
        <td colspan="2">
          <div class="col2">
            <button onclick="btn('0')">0</button>
          </div>
        </td>
        <td>
          <div>
            <button onclick="btn('00')">00</button>
          </div>
        </td>
        <td>
          <div>
            <button onclick="calc()">=</button>
          </div>
        </td>
      </tr>
  
    </table>
  </div>

  </body>

js


// 初期値０で四則演算子が押されたら'calcbtn'にする
var state = 0;

// inputに表示、エラー文消去
function show(elem) {
  document.querySelector('input').value += elem;
  errormessage.innerHTML = '';
}

// var checkNum = new RegExp(/^[0-9]/);
// checkNum.test(inputV)


// 押されたボタンを表示
function btn(elem) {
  var inputV = document.querySelector('input').value;
  
    // 四則演算子ボタンが押された時
  if (elem === '+' || elem === '-' || elem === '*' || elem === '/') {

    //四則演算子ボタンが入力された時に連続で押せないようにする
    if (state === 'calcbtn') {
      var inputV = document.querySelector('input').value;
      inputV = inputV.slice(0, -1);

      document.querySelector('input').value = inputV;
      show(elem)
  
    } else {
      state = 'calcbtn';
      show(elem)
    }

  } else {
    state = 0;
    show(elem)
  }
};


// 最初に'*','/'が入力された時に弾く
function calc2 (elem) {
  var inputV = document.querySelector('input').value;
  if (inputV === '' || inputV === '+' || inputV === '-') {
    return;
  } else {
    btn(elem);
  }
};
  



// input を更新する
function update(elem) {
  document.querySelector('input').value = elem;
  errormessage.innerHTML = '';
}

// =ボタンが押された時計算する
var errormessage = document.getElementById('errormessage');
function calc() {
  var inputV = document.querySelector('input').value;
  try {
    var total = new Function('return ' + inputV);
    update( total().toString() );
  } catch {
    errormessage.innerHTML = '入力値が不正です。'
  }
}

#終わりに
少しでも後学者の方の参考になれば幸いです！
指摘などがありましたら、コメントなどによろしくお願いいたします！