Why cant my anchor fire this javascript object?

I have a page with a linked javascript object:

//the constructor function
function NewsScroller() {

}


//now put some config objects using the JSON structure
NewsScroller.prototype.config = {
    serviceUrl : '/NewsProvider.svc/rest/GetNews/',
    pageIndex : 0
}


//the argumented constuctor for this object
NewsScroller.prototype.init = function () {


    this.getNews(this.config.pageIndex);
    console.log(this.config.pageIndex);

}

NewsScroller.prototype.decreasePage = function () {

    console.log('current page index ' + this.config.pageIndex);

}

Then I have the page ready declaration:

<script>
        $(document).ready(function () {

            var newsScrollerForPage = new NewsScroller();
            newsScrollerForPage.init();

            newsScrollerForPage.decreasePage();

        });

    </script>

Which produces the result:

current page index 0

I want to call the function from an anchor tag so I have:

<div class="scroller-left">
    <a id="scroller-left-a" href="javascript:newsScrollerForPage.decreasePage();">
        <img src="/Images/Left-Scroller.jpg"/>
    </a>
</div>

But when I click the anchor I get:

newsScrollerForPage is not defined

Why is this? Surely I should be able to call the object and function just like I did in the开发者_如何学编程 .ready method?

You define the newsScrollerForPage inside the ready function with local scope (by using "var"), you can't use it outside of there except if you define a function in the same scope which uses it (scope is evaluated from where functions are defined, not from where they are called).

You can quickly fix the issue by taking away the var from before it (making it more global rather than local in scope) but I wouldn't suggest this as the best solution.

Better would be to link up the anchor like this:

    $(document).ready(function () {

        var newsScrollerForPage = new NewsScroller();
        newsScrollerForPage.init();

        newsScrollerForPage.decreasePage();

        document.getElementById("scroller-left-a").onclick=function()
        {
             newsScrollerForPage.decreasePage();
             return false;
        }

    });

and removing the href from the HTML element.