Javascript Array keeps showing last child only

Question

I wrote a simple array list and for loop statement, and for some reason only the last item in the array list is being called. I need each item in the array list to display, one at a time, after the user clicks on the button. Here's my code so far. Any help would be appreciated. Thanks

var panelTitleArray = [
    'Bacon &amp; Cheddar Mash', 
    'Chipotle &amp; Cilantro Mash',
    'Pesto Mash', 
    'Pancetta &amp; Rosemary Mash', 
    'Taco Seasoning &amp; Cheddar Mash',
    'Roasted Garlic Mash',
    'Sour Cream &amp; Chives Mash',
    'Corn &amp; Red Pepper Flakes Mash',
    'Ranch Dressing Mash',
    'Broccoli &amp; Cheddar Mash',
    'Old Bay Seasoning Mash', 
    'Smoked Gouda &amp; Scallions Mash', 
    'BBQ Mash',
    'Horseradish &amp; Chive Mash',
    'Parmesan Mash',
    'Corn, Broccoli &amp; Carrot Bits Mash',
    'Greek Yogurt Mash'
  ];

 $(function panelTitle() {
   // $("#st-panelTitle").html(panelTitleArray[0]);

    for (var i = 0; i < panelTitleArray.length; i++) {

        $("#st-panelTitle").html(panelTitleArray[0]);

        $('.arrowNext').click(function(){
           $("#st-panelTitle").html(panelTitleArray[i]);
           console.log("clicked")
        });
   };

 });

the previous click events are overwritten on each iteration of the loop — Pascamel, Dec 18 '14 at 20:59
not to mention, what is the line `$("#st-panelTitle").html(panelTitleArray[0]);` for? — Chin, Dec 18 '14 at 21:01

score 1 · Answer 1 · answered Dec 18 '14 at 21:00

1

Try something like this

$(function panelTitle() {

    $("#st-panelTitle").html(panelTitleArray[0]);

    var i = 1;
    $('.arrowNext').click(function(){
       $("#st-panelTitle").html(panelTitleArray[i++]);
       console.log("clicked")
    });

});

answered Dec 18 '14 at 21:00

Simon H

20,332
14
71
128

good answer but you will get an out of bound error at some point and with i=1 you will jump 1 item in the list. – gyc Dec 18 '14 at 22:04

score 1 · Answer 2 · answered Dec 18 '14 at 21:11

1

Or maybe use a jQuery's iterator

$(panelTitleArray).each(function(i,v) {
  $('.arrowNext').click(function(){
    $("#st-panelTitle").html(v)
    console.log("clicked")
  })
})

answered Dec 18 '14 at 21:11

punund

4,321
3
34
45

A for loop in this case is definitely not needed. – gyc Dec 18 '14 at 21:49

score 0 · Accepted Answer · answered Dec 18 '14 at 21:22

What you code does is looping though all the items in the array, assign the first item to the #st-panelTitle element x times and assign the last item (you code goes through the loop on each click) to #st-panelTitle each time you click on the button.

You need to refactor the whole click() function like so:

http://jsfiddle.net/LxfLbb4b/

var panelTitleArray = [
  'Bacon &amp; Cheddar Mash', 
  'Chipotle &amp; Cilantro Mash',
  'Pesto Mash', 
  'Pancetta &amp; Rosemary Mash', 
  'Taco Seasoning &amp; Cheddar Mash',
  'Roasted Garlic Mash',
  'Sour Cream &amp; Chives Mash',
  'Corn &amp; Red Pepper Flakes Mash',
  'Ranch Dressing Mash',
  'Broccoli &amp; Cheddar Mash',
  'Old Bay Seasoning Mash', 
  'Smoked Gouda &amp; Scallions Mash', 
  'BBQ Mash',
  'Horseradish &amp; Chive Mash',
  'Parmesan Mash',
  'Corn, Broccoli &amp; Carrot Bits Mash',
  'Greek Yogurt Mash'
  ];

    var currentItem = 0;
    $("#st-panelTitle").html(panelTitleArray[currentItem]);
    $( '.arrowNext' ).click(function() {
        currentItem++;
        if(currentItem > panelTitleArray.length)
            currentItem = 0;
        $("#st-panelTitle").html(panelTitleArray[currentItem]);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="st-panelTitle"></div>
<input type="button" class="arrowNext" value="next" />

<div id="st-panelTitle"></div>
<input type="button" class="arrowNext" value="next" />

This is a non-standard method of solving this scope problem in JS. It will only work for this very specific case. It would be better to use the standard solution of generating a new scope. — Preston S, Dec 18 '14 at 21:31
The answer is adapted to this particular case @PrestonS Why would you force him to use a loop when it's obviously suboptimal for what he wants to do? — gyc, Dec 18 '14 at 21:46
this worked! Thanks. I got something similar working myself. Wish I could give you an up vote but stackoverflow is not allowing me. I'm not sure who down voted you. Thanks for your help. — vtj205, Dec 18 '14 at 22:21

Javascript Array keeps showing last child only

3 Answers3