JavaScript代码仅在IE中不起作用

Question

I have just verified my javascript code works fine in all browsers except IE. How is it possible that the script is correctly read and executed in Chrome, Safari... but IE finds some inexplicable error and refuses to run the code?

$(document).ready(function() {
        var NewsNavigator = {

            init: function(config) {
                this.news = config.news;
                this.newsNum = this.news.length;
                this.navbuttons = config.navbuttons;
                this.prevButton = config.prevButton;
                this.nextButton = config.nextButton;
                this.displayatonce = config.displayatonce;
                this.maxSteps = Math.ceil(this.newsNum / this.displayatonce);
                this.counter = 0;
                this.navigateNews();
                this.enableNav();
                this.checkButtonsVisibility();

            },

            showNews: function() {
                var start = this.counter * this.displayatonce;
                var end = this.counter * this.displayatonce + (this.displayatonce - 1);
                for (i=start; i<=end; i++) {
                    this.news.eq(i).show();
                }

            },

            hideAllNews: function() {
                console.log("hiding news");
                this.news.hide();
            },

            navigateNews: function() {
                this.hideAllNews();
                this.showNews();
            },

            checkButtonsVisibility: function() {
                if (this.counter <= 0)
                {
                    this.prevButton.css('visibility', 'hidden');
                }
                else
                {
                    this.prevButton.css('visibility', 'visible');
                }

                if (this.counter >= this.maxSteps - 1) 
                {
                    this.nextButton.css('visibility', 'hidden');
                }
                else
                {
                    this.nextButton.css('visibility', 'visible');
                }
            },

            enableNav: function() {
                self = this;
                this.navbuttons.on('click', function(event) {
                    if (($(this).data('dir') === 'prev') && (self.counter > 0)) {
                        self.counter--;
                        self.navigateNews();
                    } else if (($(this).data('dir') === 'next') && (self.counter < self.maxSteps - 1)) {
                        self.counter++;
                        self.navigateNews();
                    }
                self.checkButtonsVisibility();
                event.preventDefault(); 
                });
            }
        };

        NewsNavigator.init({
            news: $('div#cat-news').find('div.oneCol'),
            displayatonce: 3,
            navbuttons: $('div#nav').find('a'),
            prevButton: $('div#nav a.prec'),
            nextButton: $('div#nav a.succ')
        });
});

Error message in IE9

SCRIPT438: The object doesn't support the 'checkButtonsVisibility' property or method.
NewsNavigator.js, Row 69 Character 5

Answer 1

Well this comes down to the history of JavaScript.

JavaScript was implemented based on ECMAScript:

http://en.wikipedia.org/wiki/ECMAScript

Each and every single Web Browser provider (Mozilla, Google, Microsoft) decided that they didn't want to standardize JavaScript and they each came up with their own implementation of the ECMAScript, and thus their own JavaScript engine.

Thus, we programmers get a headache trying to write JavaScript that is compatible across all these different JavaScript engines because each of them read JavaScript in their own way (which answers your question of why IE finds some inexplicable error while the rest doesn't)

Fun Fact: Only Mozilla's implementation of ECMAScript is actually called "JavaScript".

You should lookup on how to write JavaScript that is cross-compatible across different JavaScript engines.

Answer 2

Use a javascript validation tool, such as JSLint to ensure maximum compability. This, since a single omitted character (such as ; , ' , etc) can cause your script to not be run in specific browsers.

JSLint will also provide different tips on what do to and not to do to provide even further compability.