Scope issue in Javascript when writing to an array

Question

BACKGROUND

I have a list of buyerNames and want the admin user to be able toggle their names. So far so good. Visually it works as expected. Admin user clicks on name and it's toggled on (background around the name and the items changes shade). Admin user can click and unclick names to his heart's desire.

CODE BELOW: I'm showing large sections of my code in case I'm messing something up in a place where I don't think there's a problem.

<div class="headerSecondaryBg"> <!-- THE BACKGROUND LAYER - POSITION AND COLOR -->
    <div class="buyerItems"> <!-- NUMBER OF BUYER ITEMS -->
        <div class="item i1">42</div>
        <div class="item i2">31</div>
        <div class="item i3">57</div>
        <div class="item i4">49</div>
        <div class="item i5">16</div>
        <div class="item i6">38</div>
        <div class="item i7">24</div>
    </div>
    <div class="buyerNames"> <!-- BUYER NAMES --> 
        <div class="buyer b1">BUYERNAME 1 </div>
        <div class="buyer b2">BUYERNAME 2 </div>
        <div class="buyer b3">BUYERNAME 3 </div>
        <div class="buyer b4">BUYERNAME 4 </div>
        <div class="buyer b5">BUYERNAME 5 </div>
        <div class="buyer b6">BUYERNAME 6 </div>
        <div class="buyer b7">BUYERNAME 7 </div>
    </div>
    <div class="selectBuyer"> <!-- CREATES THE VISIBLE ON / OFF FOR THE TOGGLE AS PER DESIGN SPEC -->
        <div class="selectBuyerOff b-on1"></div>
        <div class="selectBuyerOff b-on2"></div>
        <div class="selectBuyerOff b-on3"></div>
        <div class="selectBuyerOff b-on4"></div>
        <div class="selectBuyerOff b-on5"></div>
        <div class="selectBuyerOff b-on6"></div>
        <div class="selectBuyerOff b-on7"></div>
    </div>      
</div><!-- // END headerSecondaryBg -->

BACKGROUND

After the admin user has selected his buyers he clicks "show items" to reveal a hidden div below.

PROBLEM: Putting the toggled names into an array.

STEP 1:

Get buyerName (b-on1, b-on2 ... in this test example) and place in array.

    $(".selectBuyer div" ).click(function(){
        $(this).toggleClass("selectBuyerOn"); // show user that items are on or off
            var all=$(this).attr('class');
            console.log(all);

console.log = selectBuyerOff b-on1 selectBuyerOn.
EXACTLY WHAT WAS EXPECTED (considering I clicked on buyer 1)

STEP 2:

OK. Let's just have b-on1 and get rid of the other classes.

       $(".selectBuyer div" ).click(function(){
            $(this).toggleClass("selectBuyerOn"); // show user that items are on or off
               var all=$(this).attr('class');
               bbb=$(this).attr('class').split(' ')[1];
               console.log(all);
               console.log(bbb);

I get what's expected:
console.log(all) = selectBuyerOff b-on1 selectBuyerOn
console.log(bbb) = b-on1

STEP 3:

NOW let's put it into an array. (This goes immediately after the above code)

    testArr=[];
    testArr.push(all);
    testArr.push(bbb);
    console.log(testArr);

console.log = ["selectBuyerOff b-on1 selectBuyerOn", "b-on1"]

Now here's the problem - the array resets itself after every click.

I want the array to have b-on1 and b-on2 if the user selected those and b-on1 and b-on2 if the user selected b-on1, b-on2, b-on3 (and then untoggled b-on3)

and yet the array is reset after every click.

How do I get this to work?

I tried removing var so that the variable would be in the global scope. I must be missing something simple.

testArr=[]; is initializing the array every time... place the declaration+init outside the click event. - or am i understanding this wrong? EDIT: Ben Griffiths was faster :D — Max Bumaye
– Max Bumaye, Commented Nov 13, 2014 at 15:20

Ben Griffiths · Accepted Answer · 2014-11-13 15:18:38Z

1

When testArr=[] is executed, the testArr variable is assigned to a brand new empty array.

It sounds like you need to initialize this array just the once outside of the click handler, and then simply push values into the existing array within the handler. For example:

var testArr = [];
$(".selectBuyer div" ).click(function(){
        $(this).toggleClass("selectBuyerOn"); // show user that items are on or off
        var all=$(this).attr('class');
        bbb=$(this).attr('class').split(' ')[1];
        testArr.push(all);
        testArr.push(bbb);
        console.log(testArr);
        /* ... */
});

answered Nov 13, 2014 at 15:18

Ben Griffiths

1,69615 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aravind Over a year ago

Yes, simply push when a new element is selected, and delete when it is deselected.

Mayo Over a year ago

Thank you. You can't believe how much time I wasted on this. And Aravind - you answered the follow-up question before I even got to it. Thx.

Collectives™ on Stack Overflow

Scope issue in Javascript when writing to an array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related