Data pushed to array does not remain in the array

Question

having a strange issue with JS/jQuery. When I push data from a while loop into an array, the data becomes local to the loop.

ignoring the fact my code barely works, if I move console.log(bxStore); into my document ready {} or anywhere below the while loop, it reads undefined.

var bxRegEx =  new RegExp(/[b][x]\d*[y]\d*[w]\d*[h]\d*/) //identifier 

expression

function bxCycle(){ //cycle html for indbx identifiers
    var cycle = 0
    var bxIdGet = document.getElementsByTagName('div')[cycle].outerHTML

    var bxStore = new Array()
    while (bxRegEx.test(bxIdGet)){
        bxStore.push(bxRegEx.exec(bxIdGet))
        cycle++
        bxIdGet = document.getElementsByTagName('div')[cycle].outerHTML
    console.log(bxStore)
    }
}

$(document).ready(function(){
    bxCycle()

})

https://codepen.io/anon/pen/wrRVKw?editors=1112

edit: doesn't appear to be a variable scope issue guys, my example does show it within the function, but when declaring it outside I get the same issue.

A variable declared in a function will not be visible outside the function. See [What is the scope of variables in JavaScript](https://stackoverflow.com/q/500431/8173752) for more details on how the scope works. — Endenite, Oct 18 '17 at 17:18
Possible duplicate of [What is the scope of variables in JavaScript?](https://stackoverflow.com/questions/500431/what-is-the-scope-of-variables-in-javascript) — Adam Jenkins, Oct 18 '17 at 17:22
@HermanLauenstein actually doesn't work when I put it outside of the function, it's inside currently because I've been messing with it a lot — MalyG, Oct 18 '17 at 17:22
@MalyG - then you're doing it wrong. Show us the actual code that you are running where it's declared outside the function and still doesn't work. — Adam Jenkins, Oct 18 '17 at 17:23
@MalyG - the error that is being displayed has nothing to do with data being pushed (or not) to an array. — Adam Jenkins, Oct 18 '17 at 17:25

score 2 · Answer 1 · answered Oct 18 '17 at 17:24

I don't have enough reputation to comment yet, so I have to write this in a full blown answer even though it might not fully solve your problem!

Because you define bxStore in the function, it's only usable within that function (it's "scope" is inside the function). So, if you move console.log(bxStore) into the document.ready function it can't see bxStore.

One way to solve your immediate problem is to define bxStore as a global variable (up with bgRegEx) as stravanato says, so that the document.ready function can see it. An even better way would be to have your bxcycle function

return bxStore

... then you could console log your result on document ready like

$(document).ready(function(){
    console.log(bxCycle())
})

score 2 · Accepted Answer · answered Oct 18 '17 at 17:36

2

I've looked at your codepen. The correct code goes like this:

function bxCycle(){ //cycle html for indbx identifiers
    var bxRegEx =  /bx\d*y\d*w\d*h\d*/i //identifier expression
    var bxStore = new Array();
    for (i in document.getElementsByTagName('div')) {
        if (bxRegEx.test(i)){
            bxStore.push(bxRegEx.exec(i))
        }
    }
    return bxStore
}

$(document).ready(function(){
    console.log(bxCycle())
})

answered Oct 18 '17 at 17:36

Nicholas James Bailey

347
1
5

this makes way more sense than what I've been writing, but outputs an empty array. I think the for loop is having trouble iterating through all or any of my elements. – MalyG Oct 18 '17 at 18:33
so the issue seems to only appear in safari. this method works in chrome. which makes me wonder how much time I wasted trying to get my other methods to work in safari. – MalyG Oct 18 '17 at 19:21
Do you want to show me the code you're working with now? If it has a while loop in it, it will return an empty array as the very first div doesn't match the regex. – Nicholas James Bailey Oct 20 '17 at 06:04
In fact, here's the problem! Apparently you're not supposed to use a for...in loop in conjunction with getElementsByTagName. Oops. If you update your for loop so that it's more like the code in the answer here, it should work across all browsers: https://stackoverflow.com/questions/22754315/for-loop-for-htmlcollection-elements – Nicholas James Bailey Oct 20 '17 at 06:12

score 0 · Answer 3 · answered Oct 18 '17 at 17:20

0

bxStore scope is inside the function so outside it is not visible. If console.log is inside function it should echo something, if it's outside it should not.

You should put var bxStore = new Array(); outside the function.

answered Oct 18 '17 at 17:20

stravanato

146
6

score 0 · Answer 4 · answered Oct 18 '17 at 18:37

0

You have to create a closure to expose the local variable of a function, because you declare bxStore inside a function, it will be dumped after function get executed. Yes just do a simple return

return bxStore

Or you can create a global variable.

answered Oct 18 '17 at 18:37

Keming

233
1
3
11

Data pushed to array does not remain in the array

4 Answers4