CODEWITHSUNDEEP
javascriptjqueryhtml
SrRazer __
SrRazer __

Reputation: 33

Javascript switch statement not working properly cant find solution

I'm working on a new project but have some issues with this bit of javascript. I cant figure out what is wrong and hope you can help me.

What I want my peice of code to do is count var i to 4, when it hits 4 set i to 0 and start again. The issue is that the switch statement only executes case 0 eventhough i is set to 1. I tried switching everything to strings but doesnt seem to help. 

function bckLoad() {
  var i = 0;

  switch (i) {
    case 0:
      i = 1;
      var leftPos = $('#index-header').scrollLeft();
      $("#index-header").animate({
        scrollLeft: leftPos + 1940
      }, 800);
      window.alert("Test");
      break;
    case 1:
      i = 2;
      var leftPos = $('#index-header').scrollLeft();
      $("#index-header").animate({
        scrollLeft: leftPos + 1940
      }, 800);
      window.alert("test1");
      break;
    case 2:
      i = 3;
      var leftPos = $('#index-header').scrollLeft();
      $("#index-header").animate({
        scrollLeft: leftPos + 1940
      }, 800);
      window.alert("test2");
      break;
    case 3:
      i = 4;
      var leftPos = $('#index-header').scrollLeft();
      $("#index-header").animate({
        scrollLeft: leftPos + 1940
      }, 800);
      window.alert("test3");
      break;
    case 4:
      i = 0;
      var leftPos = $('#index-header').scrollLeft();
      $("#index-header").animate({
        scrollLeft: leftPos - 7760
      }, 800);
      window.alert("test4");
      break;
    default:
      break;
  }
}
var intervalID = window.setInterval(bckLoad, 6000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="index-header">
  <ul>
    <li>
      <a href="#">
        <h1>Home</h1>
      </a>
    </li>
    <li>
      <a href="#">
        <h1>Blog</h1>
      </a>
    </li>
    <li>
      <a href="#">
        <h1>About</h1>
      </a>
    </li>
    <li>
      <a href="#">
        <h1>Contact</h1>
      </a>
    </li>
  </ul>
</div>

Upvotes: 2

Views: 143

Answers (4)

GSM
GSM

Reputation: 87

  var i = 0; // moved outside , it's logical :)

  function bckLoad() {

// taking care of redundant code

  switch (i) {
    case 0:
    case 1:
    case 2:
    case 3:
    case 4:
      i = (i+1)%5;// resetting to 0 once it reaches to 4
      var leftPos = $('#index-header').scrollLeft();

      $("#index-header").animate({
        scrollLeft: leftPos + (i==0?-7760:1940)
      }, 800);

      window.alert("test"+(i==0?"":i));

      break;
      default :
      break;
  }
}

var intervalID = window.setInterval(bckLoad, 6000);

Upvotes: 0

Barmar
Barmar

Reputation: 780909

You're setting i to 0 every time you call the function, so it doesn't remember the value between different calls. You need to move the variable outside the function.

There's also no need for the switch() statement, since you do the same thing in each case except for the new value of i. But that value is just adding 1 and wrapping around.

var i = 0;

function bckLoad() {
    i = (i + 1) % 5;
    var leftPos = $('#index-header').scrollLeft();
    $("#index-header").animate({
        scrollLeft: leftPos + (i > 0 ? 1940 : -7760)
    }, 800);
}

Upvotes: 2

Juan Pablo GM
Juan Pablo GM

Reputation: 3

Look closely to the first line after your function declaration: 

            var i = 0;

That line is running every time that you call window.setInterval(bckLoad, 6000);, as bckLoad function is being called is asigning the value of i to 0 each time that it runs. You have to get the variable devlaration out of the function, such as this: 

var i = 0;
function bckLoad(){

        switch(i){
            case 0:
                i = 1;
                var leftPos = $('#index-header').scrollLeft();
                $("#index-header").animate({scrollLeft: leftPos + 1940}, 800);                       
                window.alert("Test");
                break;
            case 1:
                i = 2;
                var leftPos = $('#index-header').scrollLeft();
                $("#index-header").animate({scrollLeft: leftPos + 1940}, 800);                     
                window.alert("test1");
                break;
            case 2:
                i = 3;
                var leftPos = $('#index-header').scrollLeft();
                $("#index-header").animate({scrollLeft: leftPos + 1940}, 800);                        
                window.alert("test2");
                break;
            case 3:
                i = 4;  
                var leftPos = $('#index-header').scrollLeft();
                $("#index-header").animate({scrollLeft: leftPos + 1940}, 800);                       
                window.alert("test3");
                break;
            case 4:
                i = 0;
                var leftPos = $('#index-header').scrollLeft();
                $("#index-header").animate({scrollLeft: leftPos - 7760}, 800);
                window.alert("test4");
                break;
            default:
                break;
        }        
    }
    var intervalID = window.setInterval(bckLoad, 6000);

Cheers!

Upvotes: 0

Jonas Wilms
Jonas Wilms

Reputation: 138267

Move

 var i = 0;

outside of the function. Otherwise it will be reset every time.

How I would do that:

  const leftBy = [1940, 1940, 1940, -7760];
  let i = 0;

  function animate() {
    const leftPos = $('#index-header').scrollLeft();
    $("#index-header").animate({scrollLeft: leftPos + leftBy[i]}, 800);                       
    window.alert(`Test${i}`);
    i = (i + 1) % 5;
  }

  setInterval(animate, 6000);

Upvotes: 9

Related Questions