Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Sharina Jones
Sharina Jones
Courses Plus Student 18,771 Points

Why does it keep concatenating?

Every time I log the sum, it concatenates instead of adding. I've done typeof on both operand and operand2 and confirmed that they're both numbers. I've tried adding them directly in the console, but it still concatenates. I've tried casting both operands to numbers before adding them. It still concatenates. I've tried adding both numbers to a third variable then printing the result. It's still a string.

I'm at my wit's end. Plz halp!

form.addEventListener('click', (e) => {
  const btn = e.target;
  console.log(e.target.tagName);
  var operand = 0;
  var operand2 = 0;

  if(btn.value !== 'AC') {
    if(!btn.classList.contains('operator')) {
      display.value += btn.value;
      operand += parseFloat(display.value);
      console.log(operand);
    } else {//trouble starts here
      operand2 += parseFloat(display.value);
      console.log(operand + operand2);
    }
  } else {
    display.value = '';
  }
});

2 Answers

Steven Parker
Steven Parker
243,658 Points
Steven Parker
Steven Parker
243,658 Points

The HTML part of the code isn't shown here, so I couldn't try it out to be sure. But I suspect that the concatenation you are talking about is occurring in the input element and not your operand variables, based on this line:

display.value += btn.value;

The display value is a string, so the "+=" operator becomes a concatenating assignment.

To facilitate a more accurate analysis, show the whole code (HTML part also).

Sharina Jones
Sharina Jones
Courses Plus Student 18,771 Points

The concatenation I'm referring to starts with the comment trouble starts here. The input is a string but as you can see in the code it's parsed to a float.

else {//trouble starts here
      operand2 += parseFloat(display.value);
      console.log(operand + operand2);
    }
Steven Parker
Steven Parker
243,658 Points
Steven Parker
Steven Parker
243,658 Points

Please show the whole code to allow a complete analysis. If you're using the workspaces, you can make a snapshot of your workspace and post the link to it here.

Sharina Jones
Sharina Jones
Courses Plus Student 18,771 Points

I've edited the above code with my HTML.

Steven Parker
Steven Parker
243,658 Points
Steven Parker
Steven Parker
243,658 Points

Some code must still be missing, for example "form" is used by the script but never defined.

But based on what I see, my original assessment still seems to explain the issue. The concatenation is occurring in the input box and the "parseInt" is just converting the already concatenated digits into a number.

Some other things that might be causing the overall behavior to be other than expected:

  • both operands are set to 0 on each click event (so "operand" is always 0 for an operator)
  • clicking an operator does not clear the display, so the digits continue to accumulate
Sharina Jones
Sharina Jones
Courses Plus Student 18,771 Points

The form is declared at the top underneath the .container div.

<body>
    <div class="container">
      <form>
        <div class="row my-1">
          <div class="col-lg-12 px-1">

The only thing missing is my CSS, but that's only setting the background color and changing the color of some of the buttons. None of that would cause this issue.

I think you're right about the clearing issue and it's possible ramifications. I'll do some more tinkering and report back.

Steven Parker
Steven Parker
243,658 Points
Steven Parker
Steven Parker
243,658 Points

The missing "form" is the one referenced on the first script line:

form.addEventListener('click', (e) => {

That's the "form" that is not defined here. To experiment with the code I defined it myself this way:

var form = document.querySelector('form');