Question

I have 2 methods, one is internal method and the other one is instance method,
When I’m calling my internal function(onkeydown="javascript:return checkChatBoxInputKey();") it works great,
But when I’m trying to activate the onclick event (onclick="this.CloseChatBox();) I get the following error:

0x800a01b6 – Microsoft JScript runtime error: Object doesn’t support
property or method ‘CloseChatBox’

Here is my code:

function ChatBox(){
    // Methods
    this.CloseChatBox = ChatBox.CloseChatBox;

    // Adding new chat box to page
    $(" <div />").attr("id", "chatbox")
    .html('<div class="chatboxhead">' +                                                    
          '<a href="javascript:void(0)" title="Close chat box" onclick="this.CloseChatBox();">X</a>' + // This line fails to work
                    '</div>' +
                    '<div class="chatboxbody">' +
                            '<textarea onkeydown="javascript:return checkChatBoxInputKey();"></textarea>' +
                    '</div>')
    .appendTo($("body"));

    $("#chatbox_" + this.CallId).show();

    return true;}

function checkChatBoxInputKey(){
    alert("checkChatBoxInputKey");}

ChatBox.CloseChatBox = function (){
    alert("CloseChatBox");}

What can I do?

Answer 1

In the onclick, this is the <a> tag itself not whatever it was in the ChatBox function.

So, you’re getting the error because <a> tags don’t have a CloseChatBox method.

I highly suggest not using attributes for event binding. Use actual event handlers. Add a class to the <a> tag, then bind an event to it using jQuery.

HTML:

<a href="javascript:void(0)" title="Close chat box" class="closeChatBox">X</a>

JavaScript (placed outside of the ChatBox function, inside a $(document).ready):

$('a.closeChatBox').click(function(){
    ChatBox.CloseChatBox();
});