Access variable outside of an eventListener in Javascript

Question

I am building an app with Javascript and OpenLayers and while it's going fairly well, I am stuck at what I feel could be an easy problem for someone experienced.

Here is part the code where the problem lives :

 const baseLayerElementsRight = document.querySelectorAll(
        '[name="baseLayerRadioButtonRight"]'
    );

    let layerRender = {};

    for (let baseLayerElementRight of baseLayerElementsRight) {
        baseLayerElementRight.addEventListener(
            'change',
            function() {
                let baseLayerElementValueRight = this.value;

                layerGroupRight.getLayers().forEach(function(element) {

                    let baseLayerNameRight = element.get('title');

                    element.setVisible(
                        baseLayerNameRight === baseLayerElementValueRight
                    );

                    let elementVisibility = element.get('visible');
                    if (elementVisibility) {
                        layerRender = element;
                        console.log(layerRender);
                    }
                });
            },
            false
        );
    }console.log(layerRender)

So Basically, I need to apply a method on the "layerRender" object variable outside of the event callback and I am quite new to programming and I struggle to find a solution to access the variable value

The console.log in the callback's event output the Object I want everytime I click on a given radio type input, but the console.log outisde it outputs an empty Object and of course don't update everytime I the event is happening.

How could I do to access the layerRender value outside of the callback?

Thanks a lot

Hello, thanks for the answer, altthough I am not sure to understand, it's already declared before the function. — Wolf, Mar 11 '20 at 16:47
You're calling `console.log(layerRender)` before the `change` event has happened (which would run the function, which would assign the value to `layerRender`). — Quentin, Mar 11 '20 at 19:35

score 0 · Answer 1 · answered Mar 11 '20 at 19:30

your last console.log only happens once as the code runs through... you first declare the variable. Then you add an eventListener in a for loop then finally do console.log code executes. and it executes NOT when you're clicking

    const baseLayerElementsRight = document.querySelectorAll(
        '[name="baseLayerRadioButtonRight"]'
    );

    let layerRender;

    for (let baseLayerElementRight of baseLayerElementsRight) {
        baseLayerElementRight.addEventListener(
            'change',
            function() {
                console.log('Click happened');

                layerGroupRight.getLayers().forEach(function(element) {

                    let baseLayerNameRight = element.get('title');

                    element.setVisible(
                        baseLayerNameRight === this.value
                    );

                    let elementVisibility = element.get('visible');
                    if (elementVisibility) {
                        layerRender = element; // assign element to layerRender

                        // console.log if element is visible only
                        console.log(layerRender);

                    }
                });
            },
            false
        );
    }

    console.log(layerRender); // Happens when function initialise NOT when click happens

Access variable outside of an eventListener in Javascript

1 Answers1