Почему калькулятор не выдает ответ при нажатии на кнопку равно?

    function insert(num) {
      document.form.textview.value = document.form.textview.value + num;
    }

    function clean() {
      document.form.textview.value = "";
    }

    function back() {
      var exp = document.form.textview.value;
      document.form.textview.value = exp.substring(0, exp.length - 1);
    }

    function equal() {
      var exp = document.form.textview.value;
      if (exp) {
        var exp = document.form.textview.value = eval(exp);
      }
    }
body {
  background-color: #b5fd8d;
  user-select: none;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 4px;
  background-color: #212121;
  padding: 4px;
  border-radius: 5px;
  max-width: 360px;
  font-family: 'Tahoma;'
}

.item {
  background-color: #b3e5fc;
  color: #000;
  padding: 20px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  cursor: pointer;
  font-weight: bold;
}

form {
  min-width: 100%;
}

input {
  width: calc(100% - 2px);
  height: 60px;
  border: none;
  outline: 0;
  font-size: 30px;
  text-align: right;
}

.input {
  grid-column: 1/-1;
  padding: 0;
}

.clean {
  grid-column: 1/3;
  background-color: #0288d1;
}

.back {
  grid-column: 3/-1;
}

.equal {
  grid-column: 4;
  grid-row: 6/8;
  background-color: #bdbdbd;
}

.zero {
  grid-column: 1/3;
}
  <div class="container">
    <div class="item input">
      <form name="form"><input name="textview" type="text" readonly></form>
    </div>
    <div class="item clean" onclick="clean()">C</div>
    <div class="item back" onclick="back()">&larr;</div>
    <div class="item" onclick="insert('+')">+</div>
    <div class="item" onclick="insert('-')">-</div>
    <div class="item" onclick="insert('&times;')">&times;</div>
    <div class="item" onclick="insert('&divide')">&divide;</div>
    <div class="item" onclick="insert('7')">7</div>
    <div class="item" onclick="insert('8')">8</div>
    <div class="item" onclick="insert('9')">9</div>
    <div class="item" onclick="insert('(')">(</div>
    <div class="item" onclick="insert('4')">4</div>
    <div class="item" onclick="insert('5')">5</div>
    <div class="item" onclick="insert('6')">6</div>
    <div class="item" onclick="insert(')')">)</div>
    <div class="item" onclick="insert('1')">1</div>
    <div class="item" onclick="insert('2')">2</div>
    <div class="item" onclick="insert('3')">3</div>
    <div class="item equal" onclick="equal()">=</div>
    <div class="item zero">0</div>
    <div class="item" onclick="insert('.')">.</div>
  </div>


Ответы (1 шт):

Автор решения: Makar X

<style>body {
  background-color: #b5fd8d;
  user-select: none;
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 4px;
  background-color: #212121;
  padding: 4px;
  border-radius: 5px;
  max-width: 360px;
  font-family: 'Tahoma;'
}

.item {
  background-color: #b3e5fc;
  color: #000;
  padding: 20px;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 22px;
  cursor: pointer;
  font-weight: bold;
}

form {
  min-width: 100%;
}

input {
  width: calc(100% - 2px);
  height: 60px;
  border: none;
  outline: 0;
  font-size: 30px;
  text-align: right;
}

.input {
  grid-column: 1/-1;
  padding: 0;
}

.clean {
  grid-column: 1/3;
  background-color: #0288d1;
}

.back {
  grid-column: 3/-1;
}

.equal {
  grid-column: 4;
  grid-row: 6/8;
  background-color: #bdbdbd;
}

.zero {
  grid-column: 1/3;
}

</style>
<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>



  <div class="container">
    <div class="item input">
      <form name="form"><input name="textview" type="text" readonly></form>
    </div>
    <div class="item clean" onclick="clean()">C</div>
    <div class="item back" onclick="back()">&larr;</div>
    <div class="item" onclick="insert('+')">+</div>
    <div class="item" onclick="insert('-')">-</div>
    <div class="item" onclick="insert('*')">*</div>
    <div class="item" onclick="insert('/')">/</div>
    <div class="item" onclick="insert('7')">7</div>
    <div class="item" onclick="insert('8')">8</div>
    <div class="item" onclick="insert('9')">9</div>
    <div class="item" onclick="insert('(')">(</div>
    <div class="item" onclick="insert('4')">4</div>
    <div class="item" onclick="insert('5')">5</div>
    <div class="item" onclick="insert('6')">6</div>
    <div class="item" onclick="insert(')')">)</div>
    <div class="item" onclick="insert('1')">1</div>
    <div class="item" onclick="insert('2')">2</div>
    <div class="item" onclick="insert('3')">3</div>
    <div class="item equal" onclick="equal()">=</div>
    <div class="item zero" onclick="insert('0')">0</div>
    <div class="item" onclick="insert('.')">.</div>
  </div>






  <script>
    function insert(num) {
      document.form.textview.value = document.form.textview.value + num;
    }

    function clean() {
      document.form.textview.value = "";
    }

    function back() {
      var exp = document.form.textview.value;
      document.form.textview.value = exp.substring(0, exp.length - 1);
    }

    function equal() {
      var exp = document.form.textview.value;
      if (exp) {
        var exp = document.form.textview.value = eval(exp);
      }
    }
  </script>
</body>

</html>

Были ошибки, поэтому некоторые функции калькулятора не работали.

→ Ссылка