CODEWITHSUNDEEP
javascripthtml
JimPanse
JimPanse

Reputation: 51

JavaScript calculator not updating values

I have a problem with my JavaScript calculator. Whenever I want to add, for example, 5+5, the result stays at 10 (blocked on one value) and does not add to the previous result (10, 15, 20, etc.).

Here is my code:

function add() {
  var a = parseInt(document.getElementById('l1').value);
  var b = parseInt(document.getElementById('l2').value);
  var c = parseInt(a + b);
  document.getElementById('result').value = +c;
}

function sub() {
  var a = parseInt(document.getElementById('l1').value);
  var b = parseInt(document.getElementById('l2').value);
  var c = parseInt(a - b);
  document.getElementById('result').value = +c;
}

function mult() {
  var a = parseInt(document.getElementById('l1').value);
  var b = parseInt(document.getElementById('l2').value);
  var c = parseInt(a * b);
  document.getElementById('result').value = +c;
}

function div() {
  var a = parseInt(document.getElementById('l1').value);
  var b = parseInt(document.getElementById('l2').value);
  var c = parseInt(a / b);
  document.getElementById('result').value = +c;
}

function divmod() {
  var a = parseInt(document.getElementById('l1').value);
  var b = parseInt(document.getElementById('l2').value);
  var c = parseInt(a % b);
  document.getElementById('result').value = +c;
}
<form name="calculator">
  <input type="text" id="l1" />
  <input type="text" id="l2" />
  <br/>
  <input type="button" value="+" onclick="add()" />
  <br/>
  <input type="button" value="-" onclick="sub()" />
  <br/>
  <input type="button" onclick="mult()" />
  <br/>
  <input type="button" value="%" onclick="divmod()" />
  <input type="button" value="/" onclick="div()" />
  <br/>
  <input type="button" value="clean" class="class2" />
  <br/>
  <p style="color:white; font-size:30px;">Result:</p>
  <input type="text" id="result" />
  <br/>
</form>

Where is the problem? I tried add + before = in document.getElementById('result').value = +c but it did not update the value then, but added 5 + 5 as 55.

Upvotes: 0

Views: 189

Answers (2)

Samathingamajig
Samathingamajig

Reputation: 13283

You need to add to the number by first parsing the value to an int:

document.getElementById('result').value = parseInt(document.getElementById('result').value) + c;

With just a = newValue, that is changing the value of result to be the c variable .
With just a += newValue, that is concatenation since document.thing.value will always return a string, and a string + number promotes the number to a string.
So you need to say oldStringValue = parseInt(oldStringValue) + newNumberValue;

The value of result also needs to be initialized to 0, either through the HTML or JavaScript, otherwise parseInt() will return NaN. I chose to do it in the JavaScript, as that's more clear.

document.getElementById('result').value = 0;

function add() {
  var a = parseInt(document.getElementById('l1').value);
  var b = parseInt(document.getElementById('l2').value);
  var c = parseInt(a + b);
  document.getElementById('result').value = parseInt(document.getElementById('result').value) + c;
}

function sub() {
  var a = parseInt(document.getElementById('l1').value);
  var b = parseInt(document.getElementById('l2').value);
  var c = parseInt(a - b);
  document.getElementById('result').value = parseInt(document.getElementById('result').value) + c;
}

function mult() {
  var a = parseInt(document.getElementById('l1').value);
  var b = parseInt(document.getElementById('l2').value);
  var c = parseInt(a * b);
  document.getElementById('result').value = parseInt(document.getElementById('result').value) + c;
}

function div() {
  var a = parseInt(document.getElementById('l1').value);
  var b = parseInt(document.getElementById('l2').value);
  var c = parseInt(a / b);
  document.getElementById('result').value = parseInt(document.getElementById('result').value) + c;
}

function divmod() {
  var a = parseInt(document.getElementById('l1').value);
  var b = parseInt(document.getElementById('l2').value);
  var c = parseInt(a % b);
  document.getElementById('result').value = parseInt(document.getElementById('result').value) + c;
}
<form name="calculator">
  <input type="text" id="l1" />
  <input type="text" id="l2" />
  <br/>
  <input type="button" value="+" onclick="add()" />
  <br/>
  <input type="button" value="-" onclick="sub()" />
  <br/>
  <input type="button" onclick="mult()" />
  <br/>
  <input type="button" value="%" onclick="divmod()" />
  <input type="button" value="/" onclick="div()" />
  <br/>
  <input type="button" value="clean" class="class2" />
  <br/>
  <p style="color:white; font-size:30px;">Result:</p>
  <input type="text" id="result" />
  <br/>
</form>

Upvotes: 2

Adam Specker
Adam Specker

Reputation: 422

While the +c is on the right track (converting c to a number), c is already a number, it is the result of parseInt(). The reason you got 55 is because it was concatenating strings, not adding numbers (JS can be funky with the string to number thing because it is not a strongly typed language). Javascript's type coercion can be a big pain sometimes!

I believe that getting the value of result, casting it to an integer, adding c to that integer, and THEN setting the DOM element value will get you the behavior you are looking for.

I am being intentionally vague because I believe you have demonstrated that you have the knowledge and tools to do this from your code sampling above. If you still can't get it to work after more effort, please comment on this answer and I will provide a more in depth solution.

Upvotes: 3

Related Questions