CODEWITHSUNDEEP
javascriptdom-events
Calyo Delphi
Calyo Delphi

Reputation: 349

ReferenceError: event is not defined on addEventListener()

I keep getting this error when I try to load an HTML doc I'm working on:

ReferenceError: event is not defined.

It points to the addEventListener() line in the JavaScript of the document. I am trying to AVOID jQuery if at all possible. Hence my use of document.getElementsByClassName().addEventListener() instead of $(".className").click().

Furthermore, I would also like confirmation to this question:

  1. Is addEventListener() a valid method to call from getElementsByClassName(), or...
  2. Will I need to use the forEach() method to attach the addEventListener() method to each element object one at a time?

Relevant JavaScript (very incomplete because it is supposed to make some major divs appear/disappear, and I'm implementing that functionality dead last after all content has been added to the page):

document.getElementsByClassName("NavbarButton").addEventListener(
    "click",
    JumpToSection(event.target.innerHTML)
);

function JumpToSection(Section)
{
    /*
        TO DO:
        Figure out how to toggle visibility of main sections
        The selected section needs to have visibility turned on & all others turned off
        May be doable with a loop and an if-else statement
    */
    
    // Set the URL to include the viewed section ONLY IF the function's input parameter is NOT BLANK
    // EXTREMELY optimized solution found here:
    // http://stackoverflow.com/questions/154059/how-do-you-check-for-an-empty-string-in-javascript
    if(!!Section) location.hash = Section;
    
    // Make sure the page is scrolled to the top
    window.scrollTo(0,0);
    
    // To be used a bit later on for looping through the sections & toggling visibility
    var AllSections = document.getElementsByClassName("Section");
}

And the bit of HTML where I'm trying to add the event listeners (right now, I'm testing on only one of the Navbar buttons; once it works I can remove the onclick="" attributes from the others):

<div id="TopBar" class="grid_32">
    <div id="CharName" class="grid_8 alpha">Calyo Delphi</div>
    
    <ul id="NavBar" class="grid_24 omega">
        <li id="ImagesButton"  class="NavbarButton grid_6 alpha">IMAGES</li>
        <li id="DetailsButton" class="NavbarButton grid_6"       onclick="JumpToSection(this.innerHTML)">DETAILS</li>
        <li id="FormsButton"   class="NavbarButton grid_6"       onclick="JumpToSection(this.innerHTML)">FORMS</li>
        <li id="StatsButton"   class="NavbarButton grid_6 omega" onclick="JumpToSection(this.innerHTML)">STATS</li>
    </ul>
</div>

I have searched other questions similar to this here on Stack Overflow, but it seems like I've already passed the event into the called function like I should be doing? So I don't know what I've missed.

Upvotes: 1

Views: 5609

Answers (1)

Anik Islam Abhi
Anik Islam Abhi

Reputation: 25352

In javascript you have to attach event to every node return by getElementsByClassName

Like this 

var classes=document.getElementsByClassName("NavbarButton");

for(var i=0;i<classes.length;i++)
    classes[i].addEventListener('click', JumpToSection);

function JumpToSection(event){
  console.log(event.target.innerHTML);
}

Upvotes: 2

Related Questions