Can't ++Increment a variable

Question

Alrighty. So I am trying to create a mechanism of recording how many times a song is being played. So visually, I am clicking on each song, but the plays variable does not increment with each click.

Here is the TypeScript:

plays: number = 0;

  addPlay(song){
    song.plays = 0;
    song.plays++;
  }

And the HTML:

<ul> <!-- Each song on the album -->
    <li class="song-block"
        *ngFor='let song of songsToDisplay'
        (click)="getSong(song)"
        (mouseenter)="song.thumbsVisible=true"
        (mouseleave)="song.thumbsVisible=false">
      <div class="song-card"
           (click)="addPlay(song)">
        <p *ngIf="!song.isPlaying"
            class="song-number">{{song.tracknumber}}</p>
        <i *ngIf="song.isPlaying" class="fa fa-play fa-lg"></i>
        <p class="song-name">{{song.name}}</p>
        <p class="song-length">{{song.length}}</p>
        <div class="thumbs"
             *ngIf="song.thumbsVisible"> <!-- Thumbs section -->
          <i class="fa fa-thumbs-up fa-lg" [ngClass]="selected"
             (click)="thumbs(song)"
             >
          </i>
          <i class="fa fa-thumbs-down fa-lg" [ngClass]="selected"
             (click)="thumbs(song)"
             >
          </i>
        </div>

        <p class="plays">{{song.plays}}</p> <---- PLAYS
        <svg class="explicit"
            *ngIf="albumToDisplay.isExplicit === 'true'"
            viewBox="0 0 24 24"
            preserveAspectRatio="xMidYMid meet"
            focusable="false">
              <g class="style-scope iron-icon">
                <path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-4 6h-4v2h4v2h-4v2h4v2H9V7h6v2z"></path></g></svg>
      </div>
    </li>
  </ul>

Sure. You set it to zero every time. Then increment it. – spender Mar 08 '18 at 04:16 — spender, Mar 08 '18 at 04:16

Shadow · Accepted Answer · 2018-03-08T04:33:06.757

2

You are resetting the counter to 0 every time you call addPlay. So the variable is indeed incrementing - but only always to 1.

song.plays = 0;

Try removing that line.

If plays isn't initialised anywhere, you may need to replace the above with something like this;

if (song.plays === undefined) {
    song.plays = 0;
}

edited Mar 08 '18 at 04:33

answered Mar 08 '18 at 04:17

Shadow

8,749
4
47
57

Please always use `{}` with your statement branches. Just because you *can* do a thing, doesn't mean you should. ;) – Scott Marcus Mar 08 '18 at 04:18
That's an opinion, @ScottMarcus (but not one I disagree with). – spender Mar 08 '18 at 04:20
@ScottMarcus The same argument could be made from the opposing viewpoint, but I do happen to agree with you. Braces added :) – Shadow Mar 08 '18 at 04:20
Not to get into a whole thing, yes, it's an opinion. And, it's a well-known best-practice. The reason is... taking advantage of the opportunity to omit them can (let's be honest, will) lead to bugs, while always including them will never lead to that bug. And, since we do a lot of exchanging of information with newbies, it's best to show them best-practices. – Scott Marcus Mar 08 '18 at 04:22
Removing song.plays = 0 returns NaN – Eddie Taliaferro Mar 08 '18 at 04:29
@EddieTaliaferro I guess that means you have to read the other half of my answer then... – Shadow Mar 08 '18 at 04:32
I like how you assumed I didn't read your answer xD But no, it didn't work. – Eddie Taliaferro Mar 08 '18 at 04:34
I assumed that because you said you only removed the line - and NaN is the exact error that would occur if the variable wasn't initialised. Try using `console.log` to watch the value of `song.plays`. – Shadow Mar 08 '18 at 04:35
1

Or, just `song.plays = (song.plays) ? ++song.plays : 1;` } – Scott Marcus Mar 08 '18 at 04:35
1

Mixing `++` and assignment is weird @ScottMarcus... Consider using `+ 1` instead. Also your `0` probably needs to be a `1`. – Shadow Mar 08 '18 at 04:36
@Shadow that was the very first thing that I did naturally. It returns NaN still. I probably should have put this all in the question originally so thats my fault. – Eddie Taliaferro Mar 08 '18 at 04:37
All good, knowing what to include is a skill unto itself. What about changing the if condition to `!isNaN(song.plays)` then? – Shadow Mar 08 '18 at 04:38
*Mixing `++` and assignment is weird*. ?? No, it's not. This is exactly how a ternary is supposed to be used - to return a result. But, you are right about the `1` part. – Scott Marcus Mar 08 '18 at 04:38
@ScottMarcus that returns 0 (smashes head on keyboard) lmao – Eddie Taliaferro Mar 08 '18 at 04:38
1

@EddieTaliaferro Hey, we all make typos. Comment has been updated, change `0` to `1` and change the position of the `++` to before `song.plays` – Scott Marcus Mar 08 '18 at 04:39
1

@ScottMarcus It certainly is weird. `++` changes the value of the variable it acts on - at which point you're assigning the updated variable back to itself. It's redundant and actually can have different meaning in different languages. See https://stackoverflow.com/questions/949433/why-are-these-constructs-using-undefined-behavior-in-c – Shadow Mar 08 '18 at 04:39
*at which point you're assigning the updated variable back to itself.* Which is the entire point. – Scott Marcus Mar 08 '18 at 04:41
@ScottMarcus Ahh I see. I changed the code you suggested and now the return is 1. – Eddie Taliaferro Mar 08 '18 at 04:41
1

@EddieTaliaferro Also note my comment about moving the `++` to before `song.plays` (i.e. `++song.plays`) so that the value gets updated first and then that updated value is returned. – Scott Marcus Mar 08 '18 at 04:42
1

song.plays = (song.plays) ? ++song.plays : 1; <--- Worked. – Eddie Taliaferro Mar 08 '18 at 04:43
Thanks everyone who contributed :D Definitely something I will spend some extra time studying before I go to sleep tonight. Forgot about the placement of ++ before and after a variable – Eddie Taliaferro Mar 08 '18 at 04:44
1

Please consider using `song.plays + 1` instead in the ternary - as you've already experienced, subtle differences like putting `++` before or after can drastically change the outcome. Also by using the incrementer there you are setting the variable twice for no perceivable gain. – Shadow Mar 08 '18 at 04:48
1

ahh i see. Noted. I substituted this inside the ternary. Thanks again – Eddie Taliaferro Mar 08 '18 at 04:51
@Amy im new to stackoverflow and i was trying something out lol – Eddie Taliaferro Mar 08 '18 at 04:55

Can't ++Increment a variable

1 Answers1