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

Question

I am learning and want to know if there is a way to do this, let's say I have HTML input field:

<input type=text id="input">

Nearby I would have one button:

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

I want to write javaScript that would evaluate statement (if it is an equation like "2+3" "6/2" etc) in that text field and replace that statement with an answer for the equation. What I tried:

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

I already made only possible input 1234567890 and /*-+ If there is a way, I would highly appreciate the answer with explanation, started javaScript just recently so it is still like a dark forest for me, but I do have a wish to have a better understanding of it. :)

I'd recommend using `document.getElementById("equal")` instead of `document.querySelector("#equal")` — IiroP, Jun 08 '18 at 16:28
A good practice is to read the documentation of the [new element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input) you're going to use. — Teemu, Jun 08 '18 at 16:32
@Agnut. There isn't much difference, mainly better compatibility with older browsers — IiroP, Jun 08 '18 at 16:41
What is the idea of `eval` here, if you're entering a number to the input? There are more safe ways to convert a string to number, like `parseInt/Float`, `Number` or `+`. @IiroP Supporting a browser from year 2006 is maybe not worth of bothering ..? `gEBI` is faster, though. — Teemu, Jun 08 '18 at 16:49

IiroP · Accepted Answer · 2018-06-08T16:39:00.293

You just need to swap eval(input.value) += input.innerText to 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>

Also, it would be recommended to use document.getElementById instead of document.querySelector, though there isn't much difference (mainly compatibility with older browsers). Read more

score 0 · Answer 2 · answered Jun 08 '18 at 16:36

You want the place where you type in the expression to be different than the place where you display it:

<!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() input field and output answer in same field

2 Answers2