How to increment a variable until 6 is reached, then redefine variable to 1 and continue?

Question

I am working on a content slider for my portfolio page. The goal is to add or subtract 1 from "var state" depending on which button you click.

'var state' increments the display box 1 - 6

Issue 1: Once 'var state' equals 6, there is no box 7. How can I redefine 'var state' to 1 to restart the rotation?
Issue 2: Now the opposite. If 'var state' equals 1 and you click down, there is no box 0. How do I redefine 'var state' to be 6?

var state = 1;
function currentState() {
    if(state <= 6){
        $("#example"+ state).addClass("selected").show()
        $(".example").not("#example"+ state).hide()
    }
}

.example{
    width: 200px;
    height: 50px;
    margin: 10px;
    background: #333;
    color: #FFF;
    font-size: 2em;
}
.hidden{
    display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button type="button" onClick="state++;currentState();" id="up">Up</button>
<button type="button" onClick="state--;currentState();" id="down">Down</button>

<div id="example1" class="example">1</div>
<div id="example2" class="example hidden">2</div>
<div id="example3" class="example hidden">3</div>
<div id="example4" class="example hidden">4</div>
<div id="example5" class="example hidden">5</div>
<div id="example6" class="example hidden">6</div>

change onClick="state++;currentState();" to onClick="state = (state + 1) % 6;currentState();" — gaetanoM, Mar 22 '17 at 20:29
the same way of course. If it's 0, set it to 6, if it's 7 set it to 1. — Kevin B, Mar 22 '17 at 20:29
Looking at your code, it seems that you know how `if` statements work, how numeric comparison works and how assignment works. So is there something in particular that you tried and didn't seem to give the expected result? — , Mar 22 '17 at 20:31

score 1 · Accepted Answer · answered Mar 22 '17 at 20:32

Change your if statement to just eval if it's more than 6 or lower than 1:

var state = 1;
function currentState() {
  if (state > 6) {
    state = 1
  } else if (state < 1) {
    state = 6
  }
  $("#example" + state).addClass("selected").show()
  $(".example").not("#example" + state).hide()
}

.example {
  width: 200px;
  height: 50px;
  margin: 10px;
  background: #333;
  color: #FFF;
  font-size: 2em;
}

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" onClick="state++;currentState();" id="up">Up</button>
<button type="button" onClick="state--;currentState();" id="down">Down</button>

<div id="example1" class="example">1</div>
<div id="example2" class="example hidden">2</div>
<div id="example3" class="example hidden">3</div>
<div id="example4" class="example hidden">4</div>
<div id="example5" class="example hidden">5</div>
<div id="example6" class="example hidden">6</div>

Glad to help U mate @JacobBaker – DaniP Mar 22 '17 at 20:38 — DaniP, Mar 22 '17 at 20:38

score 1 · Answer 2 · answered Mar 22 '17 at 20:33

The following code checks if the current value is 7 (or above) or 0 (or less) in which case the value is reset to 1 or 6 respectively.

var state = 1;
function currentState() {
if(state>=7) {
  state=1;
} else if (state<=0) {
  state=6;
} 

 if(state <= 6){
     $("#example"+ state).addClass("selected").show()
     $(".example").not("#example"+ state).hide()
  }
}

.example{
    width: 200px;
    height: 50px;
    margin: 10px;
    background: #333;
    color: #FFF;
    font-size: 2em;
}
.hidden{
    display: none;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" onClick="state++;currentState();" id="up">Up</button>
<button type="button" onClick="state--;currentState();" id="down">Down</button>

<div id="example1" class="example">1</div>
<div id="example2" class="example hidden">2</div>
<div id="example3" class="example hidden">3</div>
<div id="example4" class="example hidden">4</div>
<div id="example5" class="example hidden">5</div>
<div id="example6" class="example hidden">6</div>

score 0 · Answer 3 · answered Mar 22 '17 at 20:33

You need to tweak it before you use it for the class assignment.

 if(state > 6) {
      state = 1;
 } else if(state < 1) {
      state = 6;
 }

 $("#example"+ state).addClass("selected").show()
 $(".example").not("#example"+ state).hide()

That having been said, I'd use a variable for your max value if you see it as potentially changing, otherwise you may add or remove one of the boxes later on and you'll have to correct the number in multiple places. It can be easy to overlook one and break your functionality.

score 0 · Answer 4 · edited May 23 '17 at 11:54

Stop using onClick and just use jQuery click method to register event listener to appoint a function in which you can use a simple if statement.

var state = 1;

function minus() {
  state -= 1;
  if (state < 1) {
    state = 6;
  }
  currentState();
}

function plus() {
  state += 1;
  if (state > 6) {
    state = 1;
  }
  currentState();
}

function currentState() {
  if (state <= 6) {
    $("#example" + state).addClass("selected").show()
    $(".example").not("#example" + state).hide()
  }
}

$("#up").click(plus);
$("#down").click(minus);

.example {
  width: 200px;
  height: 50px;
  margin: 10px;
  background: #333;
  color: #FFF;
  font-size: 2em;
}

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="up">Up</button>
<button type="button" id="down">Down</button>

<div id="example1" class="example">1</div>
<div id="example2" class="example hidden">2</div>
<div id="example3" class="example hidden">3</div>
<div id="example4" class="example hidden">4</div>
<div id="example5" class="example hidden">5</div>
<div id="example6" class="example hidden">6</div>

Why you should not use onClick

How to increment a variable until 6 is reached, then redefine variable to 1 and continue?

4 Answers4