CODEWITHSUNDEEP
javascripthtml
NiKoLaPrO
NiKoLaPrO

Reputation: 624

Javascript count error

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! :)

Upvotes: 0

Views: 387

Answers (4)

user2936450
user2936450

Reputation:

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 :)

Upvotes: 1

AshBringer
AshBringer

Reputation: 2673

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/

Upvotes: 0

Marco Altieri
Marco Altieri

Reputation: 3818

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.

Upvotes: 1

marian0
marian0

Reputation: 654

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

Upvotes: 1

Related Questions