@Swaer

Как реализовать «минус» на калькуляторе?

<div class="calculate">
  <div class="calculate__put">
    <span class="tablo">0</span>
  </div>
  <div class="step1">
    <div class="btn">7</div>
    <div class="btn">8</div>
    <div class="btn">9</div>
    <div class="operator_x">x</div>
  </div>
  <div class="step1">
    <div class="btn">6</div>
    <div class="btn">5</div>
    <div class="btn">4</div>
    <div class="operator_minus">-</div>
  </div>
  <div class="step1">
    <div class="btn">1</div>
    <div class="btn">2</div>
    <div class="btn">3</div>
    <div class="operator_plus">+</div>
  </div>
  <div class="step1">
    <div class="btn zero">0</div>
    <div class="btn">.</div>
    <div class="operator_equally">=</div>
  </div>
</div>

* {
  box-sizing: border-box;
}
.calculate {
  background-color: #CD5C5C;
  width: 300px;
  height: 350px;
  margin: 0 auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  border-radius: 0 0 20px 20px;
}
.calculate__put {
  background-color: #FA8072;
  height: 70px;
  border: 2px solid #DC143C;
  border-radius: 20px;
  box-shadow: inset 1px 1px 5px 5px rgba(0, 0, 0, 0.5);
  position: relative;
}
.calculate__put span {
  font-size: 50px;
  position:absolute;
  right: 10px;
  top: 3px;
}

.step1 {
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
}
.step1 div {
  border: 1px solid #111;
  font-size: 35px;
  font-weight: 600;
  display:flex;
  justify-content: center;
  align-items:center;
  width: 70px;
  height: 65px;
}
.zero {
  min-width:140px;
}
.step1_left {
  border-radius: 20px 0px 0px 0px;
}
.step1_rigth {
  border-radius: 0px 20px 0px 0px;
}
.step1_rigth_bottom {
  border-radius: 0px 0px 20px 0px;
}
.step1_left_bottom {
  border-radius: 0px 0px 0px 20px;
}

let btnOperatorEqually = document.querySelector('.operator_equally');
let btnOperatorPlus = document.querySelector('.operator_plus');
let btnOperatorMinus = document.querySelector('.operator_minus');
let btnOperatorX = document.querySelector('.operator_x');
let rezult = document.querySelector('.tablo');
let btn = document.querySelectorAll('.btn');


for(let i = 0; i < btn.length; i++){
  btn[i].addEventListener('click', function(e){
    
    if(operators.operFlag === true || rezult.innerHTML == 0){
      rezult.innerHTML = e.target.innerHTML;
      operators.operFlag = false
    } else  {
      rezult.innerHTML += e.target.innerHTML;
    }
  })
};


let operators = {
  lastOper: '',
  operFlag: false,
  equally: function(){
    if(lastOper === 'plus'){
      tablo.result = +tablo.result + +rezult.innerHTML;
    }else if(lastOper === 'minus'){
      tablo.result = +tablo.result - +rezult.innerHTML;
    }else if(lastOper === 'x'){
      tablo.result = +tablo.result * +rezult.innerHTML;
    }
    
    operators.operFlag = true;
    rezult.innerHTML = tablo.result;
    tablo.result = 0;
  },
  plus: function(){
    lastOper = 'plus';
    tablo.result = +tablo.result + +rezult.innerHTML;
    rezult.innerHTML = 0;
  },
  minus: function(){
    lastOper = 'minus';
    
  },
  x: function(){
    lastOper = 'x';
    tablo.result = tablo.result * rezult.innerHTML;
    rezult.innerHTML = 0;
  },
};
let tablo = {
  result: 0
}

btnOperatorEqually.addEventListener('click',operators.equally);
btnOperatorPlus.addEventListener('click',operators.plus);
btnOperatorMinus.addEventListener('click',operators.minus);
btnOperatorX.addEventListener('click',operators.x);


Немогу реализовать минус, приме вводе 12 -2 выдает -14, помогите
  • Вопрос задан
  • 236 просмотров
Пригласить эксперта
Ответы на вопрос 1
Vlad_IT
@Vlad_IT Куратор тега JavaScript
Front-end разработчик
Я не знаю, почему у вас метод equally повторяет тот же функционал, что и методы plus, minus и.т.д.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы