locked
Javascript Error

    Question

  • Hi, I'm getting a strange Javascript Error like so:

    0x800a01b6 - JavaScript runtime error: Object doesn't support property or method

    I'm trying to build a Windows 8 Store App which retrieves information after a button click but I believe the problem is in the addeventlistener function. Below is the important part of what I have. The program works until it hits the "this.daymaker" part wher it gives the above error. Using some different print statements I have able to figure out daymaker and URL maker work fine, it's just I can't get passed on to another function if I use the addEventLister element to get to my first function. Is there any way around this? 

    ready: function (element, options) {

                // Retrieve the shuttle button and register our event handler. 
                var ShuttleButton = document.getElementById("ShuttleButton");
                ShuttleButton.addEventListener("click", this.ShuttlebuttonClickHandler, false);
                
            },

            // get user input and find locations
            ShuttlebuttonClickHandler: function (eventInfo) {

                // retrieve start and end points
                start = document.getElementById("startInput").value;
                dest = document.getElementById("destInput").value;

                // check if values were given
                if (start == "" || dest == "") {
                    document.getElementById("Error").innerText = "Must input both a start point and destination";

                }
                else {
                    document.getElementById("Error").innerText = "";

                    this.daymaker();
                }

            },

            // makes necessary dates for URL making
            daymaker: function () {

                // get today's date
                var presenttime = new Date();
                month = presenttime.getMonth() + 1;
                if (month < 10) {
                    month = '0' + month;
                }

                day = presenttime.getDate();
                if (day < 10) {
                    day = '0' + day;
                }

                year = presenttime.getFullYear();
                hours = presenttime.getHours();
                minutes = presenttime.getMinutes();

                // go to the urlmaker function now
                this.urlmaker();
            },

    Wednesday, December 5, 2012 4:00 AM

Answers

  • I believe your issue here is the way you're binding the event handler.

    What should solve your problem is to change that line to this:

     ShuttleButton.addEventListener("click", this.ShuttlebuttonClickHandler.bind(this), false);

    The reasoning behind that is that you need your event handler to have the correct context. As it stands the "this" keyword in your code above I believe refers to the current window. You can find it mentioned here if you search for "function.bind": http://msdn.microsoft.com/en-us/library/windows/apps/jj126158.aspx

    Note, if you don't want to have to deal with remembering what the "this" keyword refers to all the time, you can simply change your page's JavaScript file to be formatted slightly different so that you have the following:

    WinJS.Pages.define("Page", (function () {
    
        function ready(...) {
    
        }
    
        return {
            read: ready
        };
    
    }());

    I've written a blog post on some of the benefits of using this JavaScript pattern (the revealing module pattern) if you're interested in some more behind that alternative pattern: http://www.gotdibbs.net/blog/?p=189
    • Edited by got.dibbs Wednesday, December 5, 2012 4:36 AM
    • Marked as answer by Ender93 Wednesday, December 5, 2012 4:42 AM
    Wednesday, December 5, 2012 4:36 AM

All replies

  • I believe your issue here is the way you're binding the event handler.

    What should solve your problem is to change that line to this:

     ShuttleButton.addEventListener("click", this.ShuttlebuttonClickHandler.bind(this), false);

    The reasoning behind that is that you need your event handler to have the correct context. As it stands the "this" keyword in your code above I believe refers to the current window. You can find it mentioned here if you search for "function.bind": http://msdn.microsoft.com/en-us/library/windows/apps/jj126158.aspx

    Note, if you don't want to have to deal with remembering what the "this" keyword refers to all the time, you can simply change your page's JavaScript file to be formatted slightly different so that you have the following:

    WinJS.Pages.define("Page", (function () {
    
        function ready(...) {
    
        }
    
        return {
            read: ready
        };
    
    }());

    I've written a blog post on some of the benefits of using this JavaScript pattern (the revealing module pattern) if you're interested in some more behind that alternative pattern: http://www.gotdibbs.net/blog/?p=189
    • Edited by got.dibbs Wednesday, December 5, 2012 4:36 AM
    • Marked as answer by Ender93 Wednesday, December 5, 2012 4:42 AM
    Wednesday, December 5, 2012 4:36 AM
  • That's fantastic, it worked! Thank you very much. I appreciate that your answer was able to tell me what was wrong and teach me more about what I was doing wrong.
    Wednesday, December 5, 2012 4:42 AM