Javascript eval() 在同一字段中输入字段和输出答案

Question

我正在学习，想知道是否有办法做到这一点，假设我有 HTML 输入字段：

<input type=text id="input">

附近我要一个按钮：

<button id="equal">=</button>

我想写 javaScript 来评估那个文本字段中的语句（如果它是一个像“2+3”“6/2”等的等式）并用答案替换那个语句方程。我尝试了什么：

 var equal = document.querySelector("#equal");
 var input = document.querySelector("#input");
 equal.addEventListener('click', function () {
 eval(input.value) += input.innerText;
 });

我已经只输入了 1234567890 和 /*-+ 如果有办法，我将非常感谢有解释的答案，最近才开始 javaScript 所以它对我来说仍然像一片黑暗的森林，但我确实希望能更好地理解它。 :)

Answer 1

您只需要将 eval(input.value) += input.innerText 换成 input.value = eval(input.value)

var equal = document.querySelector("#equal");
var input = document.querySelector("#input");
equal.addEventListener('click', function() {
  input.value = eval(input.value);
});

<input type=text id="input">
<button id="equal">=</button>

此外，建议使用 document.getElementById 而不是 document.querySelector，但两者差别不大（主要是与旧版浏览器的兼容性）。 Read more

Answer 2

您希望输入表达式的地方与显示的地方不同 =22=]它：

<!DOCTYPE html>
<html>
<body>
  <button id="evaluate">Get answer</button>
  <input id="input" />
  <p id="result">waiting for answer...</p>
  <script>
    var evaluate = document.getElementById("evaluate");
    var input = document.getElementById("input");
    var result = document.getElementById("result");
    
    evaluate.addEventListener('click', function () {
      try {
        result.textContent = eval(input.value);
      }
      catch (error) {
        result.textContent = "waiting for answer...";
      }
    });
  </script>
</body>
</html>

Javascript eval() 在同一字段中输入字段和输出答案

Javascript eval() input field and output answer in same field

html

javascript

eval