Блог

Главная - Вопросы по программированию - изменение оператора на новый оператор без удаления последнего индекса

изменение оператора на новый оператор без удаления последнего индекса

#javascript #vue.js

Вопрос:

у меня есть калькулятор, я хочу написать код JavaScript, который позволяет пользователю написать только один оператор, и он будет заменить последний оператора со взрослыми (надо только заменить оператору и не банить пользователей) я написал что-то и это работает, но он просто работает с кнопки калькулятора не когда вы записываете с клавиатурой это приведет к удалению последнего индекса с клавиатурой мой полный код находится на моем GitHub https://github.com/rozhansh43/vue-cal/

  currentinput= what user writes before operators
 fullformula = the math phrase that will do the mathematics multiple numbers
 result = will show the answer or result with one number

и я был бы признателен, если бы кто-нибудь мог помочь мне с кодированием vue в фрагменте кода переполнения стека
, когда вы используете компоненты

 if (this.fullFormula.includes('')) {
        var temp = this.fullFormula.split('')
        temp[temp.length-1] = op
        this.fullFormula = temp.join('')
      }

это код, который меняет моего оператора только с помощью кнопок

 export default {
  name: 'Calculator',
  data () {
    return {
      currentSign: '',
      currentInput: '  ',
      fullFormula: '  ',
      result: '',
      inputResult: '  '
    }
  },
  methods: {
    updateNumber (digit) {        
      if (digit === '.') {
        if (!this.currentInput || !(this.currentInput * 1) amp;amp; this.result == "") { 
          this.fullFormula = '0'
        }
        if (!(this.currentInput.includes('.'))) {
          this.fullFormula  = '.'
        }
      } else {
        (!this.currentInput || (!(this.currentInput*1) amp;amp; !(this.currentInput.includes('.')))) ? (
            this.currentInput  = digit,
            this.fullFormula  = digit
        ):(
            this.currentInput  = digit,
            this.fullFormula  = digit
        );
      }
    },
    changeSign () {
      this.currentSign ? this.currentSign = '' : this.currentSign = '-'
    },
    addOperator (op) {
      if(this.result) {
        this.fullFormula = `${this.result} ${op}`
        this.result = ''
      } else {
        if (this.currentInput) {
          this.fullFormula  = `${this.result} ${op}`
          this.currentSign = ''
          this.currentInput = ''
        } else {
          if (this.fullFormula.includes('')) {
            var temp = this.fullFormula.split('')
            temp[temp.length-1] = op
            this.fullFormula = temp.join('')
          }
        }
      }
      
    },
    execute () {
      if(this.fullFormula) {
        this.fullFormula
        this.result = eval(this.fullFormula)
      } else {
        this.fullFormula
        this.result = this.currentInput
      }
      
      this.currentSign = ''
      this.currentInput = ''
      
      this.fullFormula = this.result 
    },
    clear () {
      this.currentSign = ''
      this.currentInput = ''
      this.fullFormula = ''
      this.result = ''
    },
    lastindex () {
      if (this.result == '') {
        this.fullFormula = this.fullFormula.slice (0,-1)      
      } else {
        this.result = this.result.toString().slice(0, -1)
        this.fullFormula = this.result
      }
    }
  }
}; 
 * {
    box-sizing: border-box;
    transition: 0.25s ease;
}

.abs-center {
    position: absolute;
    top: 50%;
    left: 50%;
    right: 0;
    bottom: 0;
    transform: translate(-50%, -50%);
}

.block {
    display: block;
    position: relative;
}

.rela-inline {
    display: inline-block;
    position: relative;
}

.flex-r {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
}

.flex-c {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.flex {
    flex: 1 1 0;
}

body {
    transition: 0s;
    font-family: monospace;
    font-size: 18px;
}

.small {
    font-size: 14px;
    margin-bottom: 10px;
}

.calculator {
    width: 420px;
    padding: 10px;
}

.display {
    margin: 10px 5px;
    background-color: rgb(240, 240, 240);
    font-size: 36px;
    letter-spacing: 4px;
    text-align: right;
    padding: 15px 10px;
    overflow: hidden;
    border: none;
    border-radius: 3px;
}

.display *::before {
    content: "";
    background-color: rgb(240, 240, 240);
}

.button {
    margin: 5px;
    text-align: center;
    padding: 20px 5px;
    max-width: 90px;
    background-color: rgb(250, 250, 250);
    box-shadow: 4px 3px 80px 3px rgb(201, 201, 201);
    border-radius: 3px;
    flex: 1 1 0;
}

.button:hover,
.button:active {
    background-color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
}

.button.wide {
    flex: 2 1 0;
    max-width: 500px;
}

.button.wider {
    flex: 3 1 0;
    max-width: 500px;
}

.button.grey {
    background-color: rgba(53, 55, 59, 0.5);
}

.button.grey:hover,
.button.grey:active {
    background-color: #494d5a;
}

.button.hidden {
    cursor: defau<
    opacity: 0;
}

.button.disabled {
    cursor: defau<
    color: rgba(255, 255, 255, 0.2);
}

.button.disabled:hover,
.button.disabled:active {
    background-color: rgba(255, 255, 255, 0.1);
}

input {
    width: 100%;
    height: 94px;
    background-color: rgb(250, 250, 250);
    box-shadow: 4px 3px 80px 3px rgb(201, 201, 201);
    border: none;
    padding: 0 30px;
    font-size: 20px;
} 
 <template>
<div id="app">
  <div class="abs-center calculator">
    <input  type="text" v-model="fullFormula" @keyup.enter="execute"/>
    
    <div class="block button-section">
      <div class="flex-r button-row">
        <div class="button grey" @click="clear">
          AC
        </div>

        <div class="button grey" @click="lastindex">
          C
        </div>

        <div class="button" @click="changeSign">
           /-
        </div>
        
        <div class="button" @click="addOperator('/')">/</div>
      </div>

      <div class="flex-r button-row">
        <div class="button" @click="updateNumber('7')">
          7
        </div>

        <div class="button" @click="updateNumber('8')">
          8
        </div>

        <div class="button" @click="updateNumber('9')">
          9
        </div>

        <div class="button" @click="addOperator('*')">
          *
        </div>
      </div>

      <div class="flex-r button-row">
        <div class="button" @click="updateNumber('4')">
          4
        </div>

        <div class="button" @click="updateNumber('5')">
          5
        </div>

        <div class="button" @click="updateNumber('6')">
          6
        </div>

        <div class="button" @click="addOperator('-')">
          -
        </div>
      </div>

      <div class="flex-r button-row">
        <div class="button" @click="updateNumber('1')">
          1
        </div>

        <div class="button" @click="updateNumber('2')">
          2
        </div>

        <div class="button" @click="updateNumber('3')">
          3
        </div>

        <div class="button" @click="addOperator(' ')">
           
        </div>
      </div>

      <div class="flex-r button-row">
        <div class="button wide" @click="updateNumber('0')">
          0
        </div>

        <div class="button" @click="updateNumber('.')">
          .
        </div>

        <div class="button grey" @click="execute">
          =
        </div>
      </div>
    </div>
  </div>
</div>

</template>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Комментарии:

1. я думаю, что мне следует написать что-то вроде этого, что если он получит два оператора без чисел между ними, он должен заменить последний на более старый, но я не знаю, как это сделать

Метки: