html - Why cant my anchor fire this javascript object? -

html - Why cant my anchor fire this javascript object? -

i have page linked javascript object:

//the constructor function function newsscroller() { } //now set config objects using json construction newsscroller.prototype.config = { serviceurl : '/newsprovider.svc/rest/getnews/', pageindex : 0 } //the argumented constuctor 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 have page ready declaration:

<script> $(document).ready(function () { var newsscrollerforpage = new newsscroller(); newsscrollerforpage.init(); newsscrollerforpage.decreasepage(); }); </script>

which produces result:

current page index 0

i want phone call function anchor tag have:

<div class="scroller-left"> <a id="scroller-left-a" href="javascript:newsscrollerforpage.decreasepage();"> <img src="/images/left-scroller.jpg"/> </a> </div>

but when click anchor get:

newsscrollerforpage not defined

why this? certainly should able phone call object , function did in .ready method?

you define newsscrollerforpage within ready function local scope (by using "var"), can't utilize outside of there except if define function in same scope uses (scope evaluated functions defined, not called).

you can prepare issue taking away var before (making more global rather local in scope) wouldn't suggest best solution.

better link anchor this:

$(document).ready(function () { var newsscrollerforpage = new newsscroller(); newsscrollerforpage.init(); newsscrollerforpage.decreasepage(); document.getelementbyid("scroller-left-a").onclick=function() { newsscrollerforpage.decreasepage(); homecoming false; } });

and removing href html element.

javascript html