exceedinglife Posted January 13, 2019 Share Posted January 13, 2019 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>); }) }); Link to comment Share on other sites More sharing options...
maxxd Posted January 13, 2019 Share Posted January 13, 2019 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. Link to comment Share on other sites More sharing options...
exceedinglife Posted January 13, 2019 Author Share Posted January 13, 2019 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 Link to comment Share on other sites More sharing options...
exceedinglife Posted January 13, 2019 Author Share Posted January 13, 2019 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--; }); Link to comment Share on other sites More sharing options...
exceedinglife Posted January 13, 2019 Author Share Posted January 13, 2019 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--; } }); Link to comment Share on other sites More sharing options...
exceedinglife Posted January 14, 2019 Author Share Posted January 14, 2019 I know it has something to do with the placement of my "index--" Link to comment Share on other sites More sharing options...
exceedinglife Posted January 14, 2019 Author Share Posted January 14, 2019 Moving index-- and index++ to the beginning fixed that issue. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.