How to create elements inside a loop and store them into a variable in JavaScript to be accessed outside the loop

Question

I want to create some elements of a particular number, inside a loop, store them in a variable, then access that variable outside that loop.

The reason I want to access that variable outside the loop is so that I can put them inside an append function.

function range(start, stop, step) {
    var a = [start],
        b = start;
    while (b < stop) {
        b += step;
        a.push(b);
    }
    return a;
}
var yAxis = range(1, 100, 10);

$.createAxis = function(axisValues) {
    $(axisValues).each(function(index, element) {
        yAxisNav = document.createElement('div');
        var newValue = document.createTextNode("I have content!");
        yAxisNav.appendChild(newValue);
        return yAxisNav.className = 'graphBar_yAxis_label';
    });
}(yAxis);

console.log(yAxisNav);
//$('body').append('<section>'+yAxisNav+'</section>');

The above only returns one element, how can I store this so that its accessible outside that loop?

You can add all the `created elements` in an `array` and then you can append them in `body` — PHP Worm..., Jun 30 '15 at 09:57

Tushar · Answer 1 · 2015-06-30T10:04:35.940

1

Get the value returned by createAxis

return yAxisNav object from the function. This should be the last statement in the function createAxis,

return yAxisNav;

And then you can get it as follow:

var yAxisNav = $.createAxis(something);

CODE

$.createAxis = function(axisValues) {
    $(axisValues).each(function(index, element) {
        yAxisNav = document.createElement('div');
        var newValue = document.createTextNode("I have content!");
        yAxisNav.appendChild(newValue);
        yAxisNav.className = 'graphBar_yAxis_label'; // Move up
        return yAxisNav; // Return complete object
        // ^^^^^^^^^^^^^
    });
}(yAxis);

edited Jun 30 '15 at 10:04

answered Jun 30 '15 at 09:50

Tushar

85,780
21
159
179

var yAxisNav = $.createAxis(yAxis); console.log(yAxisNav ); Returns undefined – Relm Jun 30 '15 at 10:01
Maybe I updated it wrongly, could you give the full example as per the code on the question. – Relm Jun 30 '15 at 10:03
@Relm Check the answer – Tushar Jun 30 '15 at 10:04
console.log($.createAxis(yAxis)); now returns: Uncaught TypeError: $.createAxis is not a function – Relm Jun 30 '15 at 10:12

score 1 · Accepted Answer · answered Jun 30 '15 at 10:21

As you wants to return a list of div's, I have moved yAxisNav outside function and appending it with every loop.

I think you are looking for this...

var yAxisNav = "";
$.createAxis = function (axisValues) {
    $(axisValues).each(function (index, element) {
        var elem;
        elem = document.createElement('div');
        var newValue = document.createTextNode("I have content!");
        elem.appendChild(newValue);
        elem.className = 'graphBar_yAxis_label';
        yAxisNav += elem.outerHTML;
    });
    return yAxisNav;
}(yAxis);

console.log(yAxisNav);
$('body').append('<section>'+yAxisNav+'</section>');

score 0 · Answer 3 · edited May 23 '17 at 12:30

0

As mentioned here, define the variable in the highest scope in which you want to access it.

In this case, define it outside the range function.

edited May 23 '17 at 12:30

Community

1
1

answered Jun 30 '15 at 09:51

JBux

1,394
8
17

How to create elements inside a loop and store them into a variable in JavaScript to be accessed outside the loop

3 Answers3