1

I have a javascript array, mediaSizes as follows: ['xs','md','lg'].

I'm using a variable media to refer to the specific index in the array. So media can either be 0, 1, or 2. So mediaSizes[media] should either output xs, md, or lg.

I have up and down arrows for user to cycle through this array. However, when the user clicks the up arrow, and the media value is 2, I want the user to cycle back down to xs. Similarly, if the user presses the down arrow on xs I want them to cycle through to large.

I have the following if else statement, but it doesn't seem to be working:

  var mediaSizes = ['xs','md','lg'];

  var media = 0;

  $scope.mediaDisplay = mediaSizes[media];

  $scope.changeMedia = function(direction) {
    if (media > 2 || media < 0) {
      media = 0;
    } else { 
      if (direction == 'up') {
        media ++;
        $scope.mediaDisplay = mediaSizes[media];
      } else {
        media --;
        $scope.mediaDisplay = mediaSizes[media];
      }
    }   
  }

Right now, I settled for setting the media value to 0 for the sake of getting it to work. There has to be an easier way to cycle through 0, 1, 2...

Improve this question
3
  • Should var mediaDisplay be $scope.mediaDisplay (or just mediaDisplay, depending on what $scope is?) Otherwise, the value of mediaDisplay is scoped to the changeMedia function... Commented Feb 7, 2015 at 1:13
  • your var mediaDisplay isn't actually changing anything. Commented Feb 7, 2015 at 1:14
  • Supposed to be $scope. I was changing it for the sake of simplicity, looks like it did the opposite. See edits. Commented Feb 7, 2015 at 1:15

3 Answers 3

Reset to default
2

The usual trick for incrementing a value that you want to wrap around is to use the % operator. For decrementing, you just have to brute force it and check for negative values:

 var mediaSizes = ['xs','md','lg'];

  var media = 0;

  $scope.mediaDisplay = mediaSizes[media];

  var changeMedia = function(direction) {
      if (direction === 'up') {
          media = ++media % mediaSizes.length;
      } else {
          if (--media < 0) media += mediaSizes.length;
      }
      $scope.mediaDisplay = mediaSizes[media];
  }

The % operator is handy when incrementing because it will guarentee a value between 0 and operand - 1. So media % mediaSizes.length will always be a legal index of the array and it will work for wrapping around as you increment media.

Unfortunately, the % operator doesn't do what you want for negative numbers so if we find a negative number, we have to do something different. In this case, I just chose to add mediaSizes.length which will cause -1 to wrap around to the last index.

FYI, note I'm using mediaSizes.length rather than any hard-coded constants so this code would continue to work flawlessly even if you added more mediaSizes to the array. This is one of the principles of more robust code that automatically handles changes elsewhere.

For code cleanliness, this might be a nice place to capture some variables in a closure to keep them out of the global scope:

var changeMedia = (function() {
      var mediaSizes = ['xs','md','lg'];
      var media = 0;
      $scope.mediaDisplay = mediaSizes[media];

      return function(direction) {
          if (direction === 'up') {
              media = ++media % mediaSizes.length;
          } else {
              if (--media < 0) media += mediaSizes.length;
          }
          $scope.mediaDisplay = mediaSizes[media];
      }
})();
Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

@Himmel - Do you realize that you can upvote all answers that are providing helpful info? And, I assume you know that if one solves your problem, you can/should select a "best answer" by clicking the green checkmark to the left of that answer. Further info on upvoting.
I do know this, thanks. I got pulled away from the computer for a second. But fully intend on learning a few of these helpful lessons in modulo use and if then ordering when I get a second. I want to wrap my head around your explanation of brute forcing the decrementing, as well as @alexpods explanation of ternery operators.
is ++media the same as media++?
@Himmel - One is pre-increment, the other is post-increment. See this article for explanation. Sometimes, there is no difference, but in the cases where I use it, pre-increment and pre-decrement is needed so the rest of the expression is based on the changed value.
So in the if statement... let's say media = 0. media evaluates to the remainder of the modulus, or remainder value of "pre-incremental" 0, which is 1
|
1

How about:

  if (direction == 'up') {
    media ++;
    if(media > 2){
       media = 0;
    }
    var mediaDisplay = mediaSizes[media];
  } else {
    media --;
    if(media < 0){
       media = 2;
    }
    var mediaDisplay = mediaSizes[media];
  }
Improve this answer

Comments

1

Your code is incorrect in several ways.

  1. It does not cycle down

  2. You must chance mediaDisplay property of scope, not some global mediaDisplay object. UPD: already fixed

  3. Incorrect incrementation and decrementation. For example if current media == 2 and user are making up direction, then you are incrementing that value (media++) and then trying to get mediaSizes[3] which does not exist of course.

Use this code instead:

var mediaSizes = ['xs','md','lg'];

var media = 0;

$scope.mediaDisplay = mediaSizes[media];

var changeMedia = function(direction) {
    switch (direction) {
        case 'up':
            media = media === 2 ? 0 : media+1;
            break;
        case 'down':
            media = media === 0 ? 2 : media-1;
            break;
    }
    $scope.mediaDisplay = mediaSizes[media];
};

UPD What about media = media === 2 ? 0 : media+1 - here we use ternary opertator.

First check if media === 2.

  • If true - ternary operator return 0 (we must set media to zero, as there is no media with index == 3)

  • If false - ternary operator return media+1 value.

Almost the same logic for decrementation, but in that case we check on media === 0 instead of media === 2.

Improve this answer

2 Comments

This works perfectly. Can you explain the media = media === 2 ? 0 : media+1 line?
@Himmel I added small explanation. Hope it will hep you.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.