Поле ввода javascript eval () и ответ в одном поле - PullRequest
0 голосов
/ 08 июня 2018

Я учусь и хочу знать, есть ли способ сделать это, скажем, у меня есть поле ввода 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, так что он все еще похож наТемный лес для меня, но у меня есть желание лучше понять это.:)

Ответы [ 2 ]

0 голосов
/ 08 июня 2018

Вы хотите, чтобы место, где вы напечатали выражение, было бы отличным от места, где вы отображаете это:

<!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>
0 голосов
/ 08 июня 2018

Вам просто нужно поменять 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, хотя нет большой разницы (в основном совместимость со старыми браузерами). Читать дальше

...