SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    mouseover works in this standards compliant code but onclick doesnt

    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...
    Code JavaScript:
    // 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?

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Should the event in the addEvent function just be 'click' rather than 'onclick'?

  3. #3
    SitePoint Wizard
    Join Date
    Oct 2005
    Location
    London
    Posts
    1,678
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes! Why is that?

    Thanks for your reply r51

  4. #4
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Many modern browsers name events without the 'on' at the beginning. Your script actually adds the 'on' part for those browsers that expect it.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •