addEventListener Not A Function

Question

I'm trying to make a Create Your Own Adventure-style application using vanilla JavaScript, and the console is throwing this error:

const container = document.getElementById("container");

function firstOptions () {
 const init01 = document.getElementsByClassName("init-01");
 const init02 = document.getElementsByClassName("init-02");
 const init03 = document.getElementsByClassName("init-03");

 init01.addEventListener('click', function (){
  container.innerHTML("<h1>You clicked Option 1!</h1>");
 }, false);

 init02.addEventListener('click', function (){
  container.innerHTML("<h1>You clicked Option 2!</h1>");
 }, false);

 init03.addEventListener('click', function (){
  container.innerHTML("<h1>You clicked Option 3!</h1>");
 }, false);
};

firstOptions();

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="utf-8" />
 </head>
 <body>
  <div id="container">
   <video height="500" width="500" controls>
    <source src="videos/test-vid-01.mp4" type="video/mp4" />
   </video>
   <button class="option init-01">Option 1</button>

   <button class="option init-02">Option 2</button>

   <button class="option init-03">Option 3</button>
  </div>

  <script src="app.js" type="text/javascript"></script>
 </body>
</html>

Thanks for all help! Not sure why saying this is not a function.

Because `getElementsByClassName("init-01")` returns a nodelist, whereas `addEventListener` is a method of - i.e. is for use on - individual nodes. If there's only one element per class name (in which case use an ID, not a class), get the element via `[0].addEventListener(...`. — Mitya, Sep 20 '17 at 16:07

addEventListener Not A Function

0 Answers0