为什么 eval() 不评估 javascript 中的两个值

Question

我是编码新手，参加过几次训练营，现在正尝试在 javascript 中制作一个计算器。当我尝试在单击 = 时评估 2 个值时出现问题。请老师指导我。我尝试了一些解决方法，但它们没有用，看了一些 youtube 视频，但感觉我正在复制粘贴我项目中的其他代码，因此为了改进我需要自己做一些事情，或者至少知道问题出在哪里。

var buttons = document.querySelectorAll('button')
var result = document.getElementById('screen')


function number() {
  for (num of buttons) {
    num.addEventListener('click', (e) => {
      buttonText = e.target.innerText
      console.log(buttonText)
      result.value += buttonText

      if (buttonText === '=') {
        result.value = eval('result.value')

      } else if (buttonText === 'x') {
        buttonText = '*'

      } else if (buttonText === 'C') {
        result.value = ''

      }

    })

  }
}
number()

body {
  font-family: 'sans-serif', Tahoma, Geneva, Verdana;
}

.container {
  text-align: center;
}

input {
  font-size: 1.3rem;
  margin-bottom: .5rem;
  padding: .2rem;
  text-align: right;
}

input:focus {
  border: none;
}

table {
  margin: auto;
}

button {
  width: 3.38rem;
  height: 2rem;
  border: none;
  font-size: 16px;
  cursor: pointer;
  background-color: aliceblue;
}

button:hover {
  background-color: #d4c2c2;
}

td:hover {
  background-color: #d4c2c2;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Calculator</title>
  <link rel="stylesheet" href="style.css" />
  <script src="https://kit.fontawesome.com/c77dc29510.js" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container">
    <h1>Calculator</h1>

    <input type="text" value="" id="screen" />

    <table>
      <tr>
        <td colspan="2" style="background-color: aliceblue;"><button> <i class="fas fa-backspace"</i> </button></td>
        <td><button>C</button></td>
        <td><button>%</button></td>
      </tr>
      <tr>
        <td><button>7</button></td>
        <td><button>8</button></td>
        <td><button>9</button></td>
        <td><button>x</button></td>
      </tr>
      <tr>
        <td><button>4</button></td>
        <td><button>5</button></td>
        <td><button>6</button></td>
        <td><button>-</button></td>
      </tr>
      <tr>
        <td><button>1</button></td>
        <td><button>2</button></td>
        <td><button>3</button></td>
        <td><button>+</button></td>
      </tr>
      <td><button>0</button></td>
      <td><button>.</button></td>
      <td><button>/</button></td>
      <td><button>=</button></td>
    </table>
  </div>

</body>
<script src="calculator.js"></script>

</html>

Answer 1

如评论中所述：您正在计算字符串 'result.value'，而不是 result.value.

的内容

除此之外，您还向“屏幕”添加了符号 =，这使得计算失败。我在下面做了修复。

var buttons = document.querySelectorAll('button')
var result = document.getElementById('screen')


function number() {
  for (num of buttons) {
    num.addEventListener('click', (e) => {
      buttonText = e.target.innerText
      console.log(buttonText)

      if (buttonText === '=') {
        result.value = eval(result.value)
      } else if (buttonText === 'x') {
        result.value = '*'
      } else if (buttonText === 'C') {
        result.value = ''
      } else { // I added this part, and removed it from above the ifs
        result.value += buttonText
      }

    })

  }
}
number()

body {
  font-family: 'sans-serif', Tahoma, Geneva, Verdana;
}

.container {
  text-align: center;
}

input {
  font-size: 1.3rem;
  margin-bottom: .5rem;
  padding: .2rem;
  text-align: right;
}

input:focus {
  border: none;
}

table {
  margin: auto;
}

button {
  width: 3.38rem;
  height: 2rem;
  border: none;
  font-size: 16px;
  cursor: pointer;
  background-color: aliceblue;
}

button:hover {
  background-color: #d4c2c2;
}

td:hover {
  background-color: #d4c2c2;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Calculator</title>
  <link rel="stylesheet" href="style.css" />
  <script src="https://kit.fontawesome.com/c77dc29510.js" crossorigin="anonymous"></script>
</head>

<body>
  <div class="container">
    <h1>Calculator</h1>

    <input type="text" value="" id="screen" />

    <table>
      <tr>
        <td colspan="2" style="background-color: aliceblue;"><button> <i class="fas fa-backspace"</i> </button></td>
        <td><button>C</button></td>
        <td><button>%</button></td>
      </tr>
      <tr>
        <td><button>7</button></td>
        <td><button>8</button></td>
        <td><button>9</button></td>
        <td><button>x</button></td>
      </tr>
      <tr>
        <td><button>4</button></td>
        <td><button>5</button></td>
        <td><button>6</button></td>
        <td><button>-</button></td>
      </tr>
      <tr>
        <td><button>1</button></td>
        <td><button>2</button></td>
        <td><button>3</button></td>
        <td><button>+</button></td>
      </tr>
      <td><button>0</button></td>
      <td><button>.</button></td>
      <td><button>/</button></td>
      <td><button>=</button></td>
    </table>
  </div>

</body>
<script src="calculator.js"></script>

</html>

为什么 eval() 不评估 javascript 中的两个值

why eval() is not evaluating two values in javascript

html

javascript

css

eval

calculator