looping through array buttons

[exceedinglife]

Hello all,

I have an array and I would like to loop through it with buttons. I have a back and forward button. I wanted to have some kind of index so I can use it as a counter and ++ or -- to pick the index but everytime I try to insert the array[index] into my html it gives me an error.

$(document).ready(function() {
  var arr = [];
  var index = 0;
  var list = "";
  $("#btndis").click(function() {
      $.each(arr, function() {
          list += '<li">'+this.id+' '+this.name</li>';
      });
      $("#section").append(list);
  });
  $("#back").click(function() {
      //var s = arr[index];
      var first = arr.first();
      //$("#sec2").innerHTML(<span>first</span>);
  })
});

 

[maxxd]

First and foremost, you've got some serious syntax issues, especially this line:

list += '<li">'+this.id+' '+this.name</li>';

You see where your nested quotes are all over the place and you're missing the concatenation before the closing <li> tag? You'll need to correct that to begin with.

Moving on from that, I'm not quite sure what you're trying to do. It sounds like you've got a list and want to select individual elements of that list using back and forward buttons? If I'm correct in that assumption, you'll want to build the list before you call your click() function. Personally, I'd build the list with 'data-index' and 'data-selected' attributes on each list item element. That way, when you click the next or previous button you can grab the data-index value of the data-selected="true" list item element, add or subtract one from it, target the list item element that has a matching data-index value and set it's data-selected attribute to "true". You'd obviously have to set the previous list item element's data-selected attribute to "false" at the same time. That way you really don't have to worry about keeping an index in the JavaScript.

[exceedinglife]

Sorry about the extra " I was removing my bootstrap part before adding it to the form 
list += '<li class="list-group-item">'+this.id+' ' 

That sounds exactly like what I want to do. I want to have a bootstrap table that highlights the selected element in the array I will look into data-index and data-selected

 

Can I use data-index and data-selected in a javascript array?

I have the array built

Edited January 13, 2019 by exceedinglife

[exceedinglife]

I got it all figured out im not sure why I was having such troubles last night lol probably was just tired and not thinking clearly. It was actually pretty easy when I took time and thought about it.

  $("#back").click(function() {
      if (index < 0) {
          index = 0;
      }
      var first = arr[index];
      $("#sec2").html('<h5>'+first.id+'</h5>');
      index--;
  });

[exceedinglife]

Now I found an error array index undefined. How can I have it so when i click the btn and its at index 0 it wont go to -1 but i need to be able to click the btn to do index-- to view the next slot in the array.

$("#back").click(function() {      if (index < 0) {          index = 0;      } else {         var first = arr[index];         $("#sec2").html('<h5>'+first.id+'</h5>');         index--;     }  });
	

[exceedinglife]

I know it has something to do with the placement of my "index--"

[exceedinglife]

Moving index-- and index++ to the beginning fixed that issue.