javascript compute mistake (calculator)

Question

I need to make a calculator using JavaScript, HTML and CSS. Everything worked out fine until I came to coding the compute (=) button.

This is my HTML:

<input type="button" value=" = " onclick="compute()">

This is my JS:

function compute() {
    var input_var = document.getElementById('input');
    ans = Math.floor(+eval(input_var.value));
    document.getElementById('answer').value = '=' + 'ans';
}

If anyone that knows how to solve what's wrong, I would greatly appreciate it if you could reply.

You need to post more than that for people to help you. We have no context of how your DOM looks like, what you intend etc. — kiddorails, Jun 16 '18 at 17:45
You haven't indicated the expected and actual (undesired) behavior, you should also probably post more of your HTML. Check out [ask] and [mcve]. It's often important for others to be able to reproduce bugs in your code in order to help solve them. — CollinD, Jun 16 '18 at 17:45
Try being more precise with your wording, elaborating on what went wrong. You can also add all the html/css/javascript using 7th icon in editor — JGFMK, Jun 16 '18 at 17:47
why `Math.floor`? maybe you entered the wonderful world of floating point calculation: https://stackoverflow.com/questions/588004/is-floating-point-math-broken — Nina Scholz, Jun 16 '18 at 17:49

score 0 · Answer 1 · answered Jun 16 '18 at 17:51

First of all, you should post the whole code to get accurate solution!

Probably these could be some of the errors:

Set id attribute of your = button with value "input"
3rd line should be: ans = Math.floor(eval(+input_var.value));
4th line should be: document.getElementById('answer').value = '=' + ans; as StaticBeagle has also mentioned.

score 0 · Answer 2 · answered Jun 16 '18 at 17:55

You should be lucky that you made the mistake to put the variable in quotes. That's why you don't get a value other than the literal string =ans(maybe, we don't know as you didn't post all code that's needed to give a better answer).

Back to why you're lucky.

Never use eval! eval is evil. (Unless you know what you do, but you don't the next couple of years). To parse a number, you'd use Number(input_var.value).

The next error is that you create a global variable by omitting one of var, let, const for your ans declaration.

The next thing you shouldn't do is to use inline javascript. We use eventListener instead. As said before, it's impossible to answer more specific as your question lacks too many details - however I'll show you how you get a value by pressing a button in the console.

document.getElementById('foo').addEventListener('submit', e => {
  // prevent submitting the form (I guess another error in your code)
  e.preventDefault();
  const value = Number(document.getElementById('input').value);
  console.log('The value is: ' + value);
}, false);

<form id="foo">
  <input type="number" id="input">
  <input type="submit" value=" = ">
</form>

score 0 · Answer 3 · answered Jun 16 '18 at 17:56

Not sure if ans is a local or global variable, but if its intention is to be a local variable then you should have it like this:

var ans = Math.floor(eval(+input_var.value));

Also, because you're setting the value of your element to '=' + 'ans' you're actually setting it to the actual string 'ans'. If you want to refer to what ans is you should write it like this:

document.getElementById('answer').value = '=' + ans;

javascript compute mistake (calculator)

3 Answers3