dcsimg
www.webdeveloper.com
Results 1 to 4 of 4

Thread: Event parameter in onclick function

  1. #1
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,863

    Question Event parameter in onclick function

    In the first 'Try it Yourself" example of the w3 tutorials
    ( See: https://www.w3schools.com/howto/howto_js_tabs.asp )

    The tab buttons are assigned an onclick function like this
    Code:
    <div class="tab">
      <button class="tablinks" onclick="openCity(event, 'London')">London</button>
      <button class="tablinks" onclick="openCity(event, 'Paris')">Paris</button>
      <button class="tablinks" onclick="openCity(event, 'Tokyo')">Tokyo</button>
    </div>
    I can not find a description of the 'event' attribute of the function
    and I do not see it being used in the 'openCity' function being called.
    Code:
    function openCity(evt, cityName) {
        // Declare all variables
        var i, tabcontent, tablinks;
    
        // Get all elements with class="tabcontent" and hide them
        tabcontent = document.getElementsByClassName("tabcontent");
        for (i = 0; i < tabcontent.length; i++) {
            tabcontent[i].style.display = "none";
        }
    
        // Get all elements with class="tablinks" and remove the class "active"
        tablinks = document.getElementsByClassName("tablinks");
        for (i = 0; i < tablinks.length; i++) {
            tablinks[i].className = tablinks[i].className.replace(" active", "");
        }
    
        // Show the current tab, and add an "active" class to the button that opened the tab
        document.getElementById(cityName).style.display = "block";
        evt.currentTarget.className += " active";
    }
    Could someone give me an explanation of how 'event' is being used by the function
    or a reference that describes it use within the function?

    Or how is is used elsewhere?
    Does it relate somehow to the 'this' attributes of object functions?

    I'm totally confused as to how it is being used in a function that does not seem to use it!

  2. #2
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    4,974
    Doesn't appear to be used at all, it might be just there because it was code used in an example that does use the event object.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

  3. #3
    Join Date
    Dec 2005
    Location
    TX
    Posts
    7,863

    Lightbulb

    Seems my mis-understanding of the problem is related to the 'evt.currentTarget'
    Looked at that for additional information and found event attributes of '.target' and '.currentTarget'

    Further investigation lead to this blog.
    See: http://www.qc4blog.com/?p=650

    Addiitonally, I discovered that a class can be defined as part of an HTML tag.
    Before this, I thought that the class had to be defined as a standalone definition, ie'
    Code:
      .someClass { background-color: yellow; }
    as opposed to
      button.someClass { background-color: yellow; }
    So much to discover and remember, so little time for both!.

  4. #4
    Join Date
    Mar 2007
    Location
    localhost
    Posts
    4,974
    Yes, you can target HTML elements and also elements by their ID, so you can have a general CSS rule for DIV elements but when you have a div element with an ID tag that you want a special rule for, you can apply that rule to that DIV only or input, etc.
    --> JavaScript Frameworks like JQuery, Angular, Node <--
    ... and please remember to wrap code with forum BBCode tags:-

    [CODE]...[/CODE] [HTML]...[/HTML] [PHP]...[/PHP]

    If you can't think outside the box, you will be trapped forever with no escape...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles