LoginSignup
0
0

More than 3 years have passed since last update.

Javascriptで電卓を作ろう 第6回 バックスペースを押した時の不具合を直そう。

Last updated at Posted at 2019-05-31

目次

第1回 HTMLとCSSでボタンを横並びで配置しよう

  • HTMLのマークアップ
  • CSS

第2回 四則演算をやってみよう

  • Javascriptで四則演算
  • 6)打った数字をコンソールに出力させよう。
  • 7)打った数字と記号を変数に格納しよう。
  • 8)計算結果を出力させよう。
  • 8-1)「=」を押した時の処理
  • 8-2) 計算結果と計算途中を、計算結果の画面に表示させよう。

第3回 連続で演算記号や小数点が押された場合の不具合処理

  • 最初に「+ ÷ - × =」が押せないようにする。
  • 二回連続で計算できるようにしたい。
  • Cボタン(リセットボタン)を押した時の処理
  • BS(バックスペース)ボタンを使えるようにする

第4回 小数点を正しく入力できるように改善しよう

  • 12.12.や12..12のように小数点を間違って入力できてしまう。
  • 電卓と同じように「.4」と入力したら0.4としたい。

第5回 演算記号を連続して押した時の不具合を直そう

第6回 バックスペースを押した時の不具合を直そう(今回の記事はここ)

第7回 「4 ÷ 3 = 1.33333333333333333」の表示桁数を10桁にしたい

第8回 「電卓と同じ表示画面を目指そう

BS(バックスペースキー)を押した時の不具合を修正しよう。

現在BSで文字を消した時、各mode(小数、整数モード)、各状態(最初、計算中、記号入力モード)が切り替わらない。
【例】
「2 + 0.4」を計算したい時に、間違って「4」を入力し、BSで消した後に「.4」を入力したとする。
「2」「+」「4」「BS」「.」「4」「=」
image.png
このようになってしまう。
このプログラムは、記号を入力した直後に「.4」と入力すると「0.4」となるように組んでいるが、一度「4」が入力された時点で、記号入力状態から、数値入力状態に変更されているため、BSを押しても、数値入力状態としてプログラムが動くからである。
そこで、BSを押し削除した場合、残った文字列の最後が何かで判断する。
最後の文字が演算記号ならstateを演算記号入力中calBtに変更
残った文字が一文字もない場合はstateをstartにする。

  //BSボタン(バックスペース)を押した時の処理
  const bs = document.getElementById('bs')
  bs.addEventListener('click', () => {
    if(state ==='finish') {
      return;//計算後は、bsを押せない。
    }
//      一文字目から、最後から二文字目までをtotalに代入(最後の一文字を除きtotalに代入する)     
    total = output_sub.textContent.slice(0, -1);
    output_sub.textContent = total;

    let lastWord = output_sub.textContent.slice(-1)
    if(lastWord==='+'||lastWord==='-'||lastWord==='*'||lastWord==='/') {
//bsを押し、最後の文字が演算記号ならstateを演算記号入力中calBtに変更
      state = 'calBtn'
    }else if(lastWord==='') {
//bsを押し、文字が空ならstateを最初startに変更
      state = 'start';
    }    
  });
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0