CODEWITHSUNDEEP
javascriptarraysscope
Mayo
Mayo

Reputation: 379

Scope issue in Javascript when writing to an array

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.

Upvotes: 0

Views: 34

Answers (1)

Ben Griffiths
Ben Griffiths

Reputation: 1696

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);
        /* ... */
});

Upvotes: 1

Related Questions