Не работает сравнение

344

12 августа 2021, 23:30

 if(this.value == total)

Делаю калькулятор. И при нажатии на кнопку '=' должно идти просчитывание операции. но нет.

Вот целиком JS

$(function() { 
  let display = $('div.display').text(), 
    total = '=', 
    plus = '+', 
    minus = '-', 
    multy = '*', 
    del = '/', 
    clear = 'C'; 
 
  console.log(typeof(display), display); 
 
  $('.btn').on('click', function() { 
    display = display + this.value; 
    $('div.display').text('').text(display); 
  }); 
  $('.btn-spec').on('click', function() { 
    if (this.value == total) { 
      console.log(display); 
    } else { 
      console.log(this.value); 
      console.log(total); 
      display = display + ' ' + this.value + ' '; 
      $('div.display').text('').text(display); 
    } 
  }) 
});

body { 
  padding: 0px; 
  margin: 0px; 
} 
 
#wrapper { 
  width: 1200px; 
  /* Ширина */ 
  /* outline: 1px solid #787274; /* Временная рамка */ 
  padding: 0px; 
  /* Внутренний отступ */ 
  margin: 0 auto; 
  /* Выравнивание по центру экрана монитора */ 
} 
 
#header { 
  width: 1200px; 
  height: 80px; 
  /* Высота */ 
  background: #25b33f; 
  /* Фоновый цвет */ 
  margin-bottom: 10px; 
  /* Отступ снизу */ 
  z-index: 101; 
  position: fixed; 
} 
 
#sidebar { 
  padding-top: 90px; 
  height: 200px; 
  width: 200px; 
  background: #9cb39a; 
  /* Фоновый цвет */ 
  margin-bottom: 10px; 
  /* Отступ снизу */ 
  float: right; 
} 
 
#content { 
  padding-top: 90px; 
  height: 600px; 
  width: 980px; 
  background: #98b32c; 
  /* Фоновый цвет */ 
  margin-bottom: 10px; 
  /* Отступ снизу */ 
} 
 
#footer { 
  height: 80px; 
  /* Высота */ 
  background: #41874e; 
  /* Фоновый цвет */ 
  margin-bottom: 0px; 
  /* Отступ снизу */ 
} 
 
.calculator-wrapper { 
  width: 250px; 
  background-color: #5fc1ee; 
} 
 
.calculator-wrapper .display { 
  height: 60px; 
  width: auto; 
  border: 2px red solid; 
  text-align: right; 
  display: block; 
} 
 
.calculator-wrapper .history { 
  display: none; 
  border: 2px red solid; 
} 
 
.calculator-wrapper .btn, 
.btn-spec { 
  font-size: large; 
  height: 50px; 
  width: 50px; 
  border: 1px solid red; 
  text-align: center; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<!DOCTYPE html> 
<html lang="ru"> 
 
<head> 
  <meta charset="utf-8" /> 
  <title>Каркас сайта</title> 
  <link href="css/default.css" rel="stylesheet"> 
</head> 
 
<body> 
  <div id="wrapper"> 
    <!--Оболочка--> 
    <div id="header"> 
      <img src="1212.png" alt="123"> 
    </div> 
    <!--Шапка--> 
    <div> 
      <div id="sidebar"> 
        <ul>todo 
          <li>calculator</li> 
          <li>todo list</li> 
        </ul> 
      </div> 
      <!--Сайдбар--> 
 
      <div id="content"> 
        <div class="calculator-wrapper"> 
          <div class="display"></div> 
          <table> 
            <tr> 
              <td><input class="btn" type="button" value="1"></td> 
              <td><input class="btn" type="button" value="2"></td> 
              <td><input class="btn" type="button" value="3"></td> 
              <td><input class="btn-spec" type="button" value="*"></td> 
 
              <tr> 
                <td><input class="btn" type="button" value="4"></td> 
                <td><input class="btn" type="button" value="5"></td> 
                <td><input class="btn" type="button" value="6"></td> 
                <td><input class="btn-spec" type="button" value="/"></td> 
              </tr> 
              <tr> 
                <td><input class="btn" type="button" value="7"></td> 
                <td><input class="btn" type="button" value="8"></td> 
                <td><input class="btn" type="button" value="9"></td> 
                <td><input class="btn-spec" type="button" value="C"></td> 
              </tr> 
              <tr> 
                <td><input class="btn-spec" type="button" value="+"></td> 
                <td><input class="btn" type="button" value="0"></td> 
                <td><input class="btn-spec" type="button" value="-"></td> 
                <td><input class="btn-spec" type="button" value="="></td> 
              </tr> 
 
 
          </table> 
          <div class="history"> 
            history 
          </div> 
        </div> 
      </div> 
      <!--Контент--> 
    </div> 
    <div id="footer"> 
    </div> 
    <!--Подвал--> 
  </div> 
  <script src="../../js/jquery-3.3.1.js"></script> 
  <script src="js/default.js"></script> 
</body> 
 
</html>

Подскажите, где и что не так.

Answer 1

собственно вычисления нигде и нету, ты просто выводишь строку. а сравнение работает

$(function() { 
  let display = $('div.display').text(), 
    total = '=', 
    plus = '+', 
    minus = '-', 
    multy = '*', 
    del = '/', 
    clear = 'C'; 
 
  console.log(typeof(display), display); 
 
  $('.btn').on('click', function() { 
    display = display + this.value; 
    $('div.display').text('').text(display); 
  }); 
  $('.btn-spec').on('click', function() { 
    if (this.value == total) { 
      console.log(eval(display)); 
    } else { 
      console.log(this.value); 
      console.log(total); 
      display = display + ' ' + this.value + ' '; 
      $('div.display').text('').text(display); 
    } 
  }) 
});

body { 
  padding: 0px; 
  margin: 0px; 
} 
 
#wrapper { 
  width: 1200px; 
  /* Ширина */ 
  /* outline: 1px solid #787274; /* Временная рамка */ 
  padding: 0px; 
  /* Внутренний отступ */ 
  margin: 0 auto; 
  /* Выравнивание по центру экрана монитора */ 
} 
 
#header { 
  width: 1200px; 
  height: 80px; 
  /* Высота */ 
  background: #25b33f; 
  /* Фоновый цвет */ 
  margin-bottom: 10px; 
  /* Отступ снизу */ 
  z-index: 101; 
  position: fixed; 
} 
 
#sidebar { 
  padding-top: 90px; 
  height: 200px; 
  width: 200px; 
  background: #9cb39a; 
  /* Фоновый цвет */ 
  margin-bottom: 10px; 
  /* Отступ снизу */ 
  float: right; 
} 
 
#content { 
  padding-top: 90px; 
  height: 600px; 
  width: 980px; 
  background: #98b32c; 
  /* Фоновый цвет */ 
  margin-bottom: 10px; 
  /* Отступ снизу */ 
} 
 
#footer { 
  height: 80px; 
  /* Высота */ 
  background: #41874e; 
  /* Фоновый цвет */ 
  margin-bottom: 0px; 
  /* Отступ снизу */ 
} 
 
.calculator-wrapper { 
  width: 250px; 
  background-color: #5fc1ee; 
} 
 
.calculator-wrapper .display { 
  height: 60px; 
  width: auto; 
  border: 2px red solid; 
  text-align: right; 
  display: block; 
} 
 
.calculator-wrapper .history { 
  display: none; 
  border: 2px red solid; 
} 
 
.calculator-wrapper .btn, 
.btn-spec { 
  font-size: large; 
  height: 50px; 
  width: 50px; 
  border: 1px solid red; 
  text-align: center; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<!DOCTYPE html> 
<html lang="ru"> 
 
<head> 
  <meta charset="utf-8" /> 
  <title>Каркас сайта</title> 
  <link href="css/default.css" rel="stylesheet"> 
</head> 
 
<body> 
  <div id="wrapper"> 
    <!--Оболочка--> 
    <div id="header"> 
      <img src="1212.png" alt="123"> 
    </div> 
    <!--Шапка--> 
    <div> 
      <div id="sidebar"> 
        <ul>todo 
          <li>calculator</li> 
          <li>todo list</li> 
        </ul> 
      </div> 
      <!--Сайдбар--> 
 
      <div id="content"> 
        <div class="calculator-wrapper"> 
          <div class="display"></div> 
          <table> 
            <tr> 
              <td><input class="btn" type="button" value="1"></td> 
              <td><input class="btn" type="button" value="2"></td> 
              <td><input class="btn" type="button" value="3"></td> 
              <td><input class="btn-spec" type="button" value="*"></td> 
 
              <tr> 
                <td><input class="btn" type="button" value="4"></td> 
                <td><input class="btn" type="button" value="5"></td> 
                <td><input class="btn" type="button" value="6"></td> 
                <td><input class="btn-spec" type="button" value="/"></td> 
              </tr> 
              <tr> 
                <td><input class="btn" type="button" value="7"></td> 
                <td><input class="btn" type="button" value="8"></td> 
                <td><input class="btn" type="button" value="9"></td> 
                <td><input class="btn-spec" type="button" value="C"></td> 
              </tr> 
              <tr> 
                <td><input class="btn-spec" type="button" value="+"></td> 
                <td><input class="btn" type="button" value="0"></td> 
                <td><input class="btn-spec" type="button" value="-"></td> 
                <td><input class="btn-spec" type="button" value="="></td> 
              </tr> 
 
 
          </table> 
          <div class="history"> 
            history 
          </div> 
        </div> 
      </div> 
      <!--Контент--> 
    </div> 
    <div id="footer"> 
    </div> 
    <!--Подвал--> 
  </div> 
  <script src="../../js/jquery-3.3.1.js"></script> 
  <script src="js/default.js"></script> 
</body> 
 
</html>