Count up/down Array animation

I want to create an count up and down animation with an Array when pressing left & right arrow.

I have 3 arrays, each arrow will be linked to an ID.

var KEY = {
  LEFT: 37,
  RIGHT:  39
}

$(function(){
  $(document).keydown(function(e){
    switch(e.which){
      case  KEY.RIGHT:
        // Arrays +1

      break;
      case  KEY.LEFT:
        // Arrays -1

      break;
    }
  });
});

var asiel = [0, 200, 300, 900, 1100, 2000];   

var nareiziger = [0, 200, 300, 900, 1100, 2000];   

var total = [0, 200, 2590, 9000, 11000, 23000];   

DEMO: codepen

I don't really know how to proces it.

How do i do that?

Thanks a lot for you help already!

Answers 1

  • Here is a workling fiddle. Just define a new variable with the positon and count it up and down.

    Working Fiddle

    var KEY = {
      LEFT: 37,
      RIGHT:  39
    }
    var asiel = [0, 200, 300, 900, 1100, 2000];   
    
    var nareiziger = [0, 200, 300, 900, 1100, 2000];   
    
    var total = [0, 200, 2590, 9000, 11000, 23000];   
    
    $(function(){
      let pos = 0
      changeVal()
      function changeVal(){
      $("#asiel").html(asiel[pos])
      $("#total").html(total[pos])
      $("#nareiziger").html(nareiziger[pos])
      }
      $(document).keydown(function(e){
        switch(e.which){
          case  KEY.RIGHT:
    
            pos < total.length ? pos += 1
            : pos = total.length
    
            changeVal()
            // Arrays +1
    
          break;
          case  KEY.LEFT:
            pos > 0 ?
            pos -= 1
            : pos = 0
    
            changeVal()
            // Arrays -1
    
          break;
        }
      });
    });
    

Related Articles