mouseover works in this standards compliant code but onclick doesnt

[elduderino]

Hi,

Ive just started re-coding my site and doing all the javascript in a nice standard way....using event listeners etc.

I have a function that set a div to display block when clicked on and display none when clicked on again.........i wrote this code for it and it works when i use mouseover as the function but when i try to use onclick it doesnt work.

Could anyone suggest why?

Heres the code, the line that isnt is the offender is inside the addlisteners function...as i say mouseover works fine...

// cross-browser event handling      
      function addEvent(element, evType, fn, useCapture) {
        if (element.addEventListener) {
          element.addEventListener(evType, fn, useCapture); 
          return true; 
        } else if (element.attachEvent) {
          var r = element.attachEvent('on' + evType, fn); 
          return r; 
        } else {
          element['on' + evType] = fn;
        }
      }
 
//add a listener on page load
      addEvent(window, 'load', addListeners, false);
 
      //function to set all the other functions running
      function addListeners() {
       var button = document.getElementById('chatButton');
       addEvent(button, 'onclick', showChat, false);
      }
 
      //toggle the chat box when a user clicks the show/hide chat button
      function showChat() {
       var chat = document.getElementById('chat_box');
       if (window.event) { 
       var chatButton = window.event.srcElement;
       } 
       else { var chatButton = this;
       }
       if(chat.style.display == 'none') {
        chat.style.display = 'block';
        chatButton.firstChild.nodeValue = 'Hide Chat';
       } 
       else {
        chat.style.display = 'none';
        chatButton.firstChild.nodeValue = 'Show Chat';
       }
      }

any ideas?

[r51]

Should the event in the addEvent function just be 'click' rather than 'onclick'?

[elduderino]

Yes! Why is that?

Thanks for your reply r51

[r51]

Many modern browsers name events without the 'on' at the beginning. Your script actually adds the 'on' part for those browsers that expect it.