Javascript count error

Question

i created a javascript calculator and i used variables for everything but it won't work.
I tried to use document.getElementById("box1").value istead of just v1 and i saw that something changed, i got 1111 if i type 11 + 11, its different, why?
I don't know what is the problem, i tried a few things but nothing changed.

Here is my code:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>JS calculator</title>
</head>
<body>
	<input id="box1" type="text" placeholder="Number one" />
	<select name="" id="select">
		<option value="+">+</option>
		<option value="-">-</option>
		<option value="*">*</option>
		<option value="/">/</option>
	</select>
	<input id="box2" type="text" placeholder="Number two" />
	<button onclick="count()">Check</button>
	<a id="output"></a>
	<script>
	var v1 = document.getElementById("box1").value;
	var v2 = document.getElementById("box2").value;
	var sel = document.getElementById("select").value;
	var out = document.getElementById("output").innerHTML;
	function count() {
		if (sel === "+") {
			out = v1 + v2;
		}
		else if (sel === "-") {
			out = v1 - v2;
		}
		else if (sel === "*") {
			out = v1 * v2;
		}
		else if (sel === "/") {
			out = v1 / v2;
		}
		else {
			out = "Error Error Error!"
		}
	}
	</script>
</body>
</html>

Thanks! :)

Hope I could make an anser. Anyway your problem is that your variables were getting initiated too early and it was getting wrong values once you click to check. Here is a fiddle so you can see things better jsfiddle.net/9pwb2yfe :) — AshBringer
– AshBringer, Commented Jan 10, 2016 at 23:07
Sorry, your question has been closed. There are several errors in your code. a) The code in the method count() cannot see the values entered by the user because the code that sets their value is executed immediately, before the user gets the chance to write something. b) The value returned by .innerHTML is just a value, it is not something that you can update. You need to set the innerHTML on the HTML element document.getElementById().innerHTML = calc; c) The values that you read from .innerHTML are strings and so a sum will calculate the concatenation of the strings and not what you wanted. — Marco Altieri
– Marco Altieri, Commented Jan 10, 2016 at 23:11

marian0 · Accepted Answer · 2016-01-10 23:14:19Z

You have 3 problems in your script.

First you should get element values inside the count() function (because you want to read those values each time someone clicks the check button).

Second, you shouldn't read the output value but write it instead.

Third, you must cast your input values to int to avoid things like: 1 + 1 = 11.

function count() {
  var v1 = parseInt(document.getElementById("box1").value);
  var v2 = parseInt(document.getElementById("box2").value);
  var sel = document.getElementById("select").value;
  var out;
  if (sel === "+") {
    out = v1 + v2;
  } else if (sel === "-") {
    out = v1 - v2;
  } else if (sel === "*") {
    out = v1 * v2;
  } else if (sel === "/") {
    out = v1 / v2;
  } else {
    out = "Error Error Error!"
  }
  document.getElementById("output").innerHTML = out;
}

Here is a fiddle with an example solution

Marco Altieri · Accepted Answer · 2016-01-10 23:15:11Z

1

There are several errors in your code.

a) The code in the method count() cannot see the values entered by the user because the code that sets their value is executed immediately, before the user gets the chance to write something.

b) The value returned by .innerHTML is just a value, it is not something that you can update. You need to set the innerHTML on the HTML element

document.getElementById("output").innerHTML = out;

c) The values that you read from .innerHTML are strings and so a sum will calculate the concatenation of the strings and not what you wanted. The multiplication will not work at all.

answered Jan 10, 2016 at 23:15

Marco Altieri

3,8282 gold badges38 silver badges51 bronze badges

Comments

score 1 · Accepted Answer · 2016-01-10 23:25:46Z

1

There were multiple issues with you code:

You have to assign v1, v2 and sel in count() or they will be only set once at page load
The variable out is overwritten in your code. You should assign it like this:

var out = document.getElementById("output");

out.innerHTML = "foo";

You have to cast your input values from string to int using parseInt()

You can find a JSBin here: http://jsbin.com/hotoletore/edit?html,js,output

Good luck with you calculator :)

edited Jan 10, 2016 at 23:25

answered Jan 10, 2016 at 23:18

user2936450

Comments

AshBringer · Accepted Answer · 2016-01-10 23:15:25Z

0

function count() {
    var v1 = document.getElementById("box1").value;
    var v2 = document.getElementById("box2").value;
    var sel = document.getElementById("select").value;
    if (sel === "+") {
         document.getElementById("output").innerHTML = +v1 + +v2;
    }
    else if (sel === "-") {
         document.getElementById("output").innerHTML = parseInt(v1 - v2);
    }
    else if (sel === "*") {
         document.getElementById("output").innerHTML = parseInt(v1 * v2);
    }
    else if (sel === "/") {
         document.getElementById("output").innerHTML = parseInt(v1 / v2);
    }
    else {
         document.getElementById("output").innerHTML = "Error Error Error!"
    }
}

If you put v1 , v2, sel before the count() function, they are initiating with initial values meaning empty, empty and +.

And you have to parse to integers the output with parseInt.

Note that +v1 casts the string to int directly.

https://jsfiddle.net/9pwb2yfe/

answered Jan 10, 2016 at 23:15

AshBringer

2,6732 gold badges24 silver badges43 bronze badges

1 Comment

Sebastian Simon Over a year ago

Why are you using the unary + to convert the inputs to numbers but parseInt three times to re-parse values that are already numbers?! The way you “fixed” the code doesn’t make much sense.

Collectives™ on Stack Overflow

Javascript count error

Here is my code:

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Here is my code:

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related