title: TypeError: Cannot read property 'value' of undefined at HTMLButtonElement
body: <p>I am displaying a dropdown menu of buttons on pug to display an HTML page. I'm using getElementsByClassName('dropdown-item') to get all the buttons in a HTMLCollection which is then iterated through to get a HTMLButtonElement. However, I am having difficulty receiving the value of the HTMLButtonElement in an alert box. </p>
  
  <p><strong>PUG Code To render HTML elements</strong></p>
  
  <pre><code>    // Dropdown
      li.nav-item.dropdown
          button.btn.btn-primary.dropdown-toggle.coursesbutt(data-toggle="dropdown") Courses
          .dropdown-menu
          button.dropdown-item(id='cc0' value='Default' onclick="changeFilter(this)") Reset Filter
          each coursename in coursecode
              button.dropdown-item(id=`${coursename}` value=`${coursename}` onclick="changeFilter(this)") #{coursename}
  </code></pre>
  
  <p><strong>Javascript to extract Button Elements</strong></p>
  
  <pre><code>    script.
          var buttons = document.getElementsByClassName('dropdown-item');
          for(var i=0; i&lt;buttons.length; i++){
              buttons[i].addEventListener("click", function(){ 
                  alert(buttons[i].value); 
              })
          }
  </code></pre>
  
  <p><strong>Console Output</strong></p>
  
  <pre><code>    Uncaught TypeError: Cannot read property 'value' of undefined at HTMLButtonElement.
  </code></pre>