Combining two functions not working

Question

I attempted to combine two functions in the code below. All seems to be working except I cannot get the variable currentImage.metaData.something to work in the second function. I appreciate your advice.

<script type="text/javascript" src="code.photoswipe-2.1.5.min.js"></script>

<script type="text/javascript">

    (function(window, PhotoSwipe){

        document.addEventListener('DOMContentLoaded', function(){

            var
                options =  {

                    getImageMetaData: function(el){
                        return {
                            href: el.getAttribute('href'),
                            something: el.getAttribute('data-something'),
                            anotherThing: el.getAttribute('data-another-thing')
                        }
                    }

                },
                instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );


            instance.addEventHandler(PhotoSwipe.EventTypes.onDisplayImage, function(e){

                var currentImage = instance.getCurrentImage();
                console.log(currentImage.metaData.something);
                console.log(currentImage.metaData.anotherThing);

            });


        }, false);


    }(window, window.Code.Util, window.Code.PhotoSwipe));


    (function(window, Util, PhotoSwipe){



        document.addEventListener('DOMContentLoaded', function(){

            var
                sayHiEl,
                sayHiClickHandler = function(e){
                    alert('yo!!!');
                }
                options = {

                    getToolbar: function(){
                        return '<div class="ps-toolbar-close" style="padding-top: 12px;">Close</div><div class="ps-toolbar-play" style="padding-top: 12px;">Play</div><div class="ps-toolbar-previous" style="padding-top: 12px;">Previous</div><div class="ps-toolbar-next" style="padding-top: 12px;">Next</div><div class="say-hi" style="padding-top: 12px;">Say Hi!</div>';
                        // NB. Calling PhotoSwipe.Toolbar.getToolbar() wil return the default toolbar HTML
                    }

                },
                instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );

                // onShow - store a reference to our "say hi" button
                instance.addEventHandler(PhotoSwipe.EventTypes.onShow, function(e){
                    sayHiEl = window.document.querySelectorAll('.say-hi')[0];
                });

                // onToolbarTap - listen out for when the toolbar is tapped
                instance.addEventHandler(PhotoSwipe.EventTypes.onToolbarTap, function(e){
                    if (e.toolbarAction === PhotoSwipe.Toolbar.ToolbarAction.none){
                        if (e.tapTarget === sayHiEl || Util.DOM.isChildOf(e.tapTarget, sayHiEl)){
                            alert(currentImage.metaData.anotherThing);
                        }
                    }
                });

                // onBeforeHide - clean up
                instance.addEventHandler(PhotoSwipe.EventTypes.onBeforeHide, function(e){
                    sayHiEl = null;
                });


        }, false);


    }(window, window.Code.Util, window.Code.PhotoSwipe));

Answer 1

You're declaring the currentImage variable within the first function. Variables created with the var keyword are function-scoped, meaning that it isn't visible outside of the function (and hence not visible in your second function, in this case).

I would probably suggest some more general code reorganization, but an easy fix would be to declare the variable above both of your functions, making it visible to both.