title: getElementsByClassName('class') for ONLY the element that is clicked on
body: <p>I have a series of divs with classes.  I want to select the text within the div that is clicked on by the user.  </p>
  
  <p>In the example code below, if user clicks on the first div, the text consoled out should be: "Sample text ONE"</p>
  
  <p>If the user clicks on the 2nd div, it should be "Sample text TWO"</p>
  
  <p>I can accomplish what I want with divs that have Id's and getElementById('id').innerHTML </p>
  
  <p>but I am forced to accomplish it with classes, which does not work.</p>
  
  <p>Digging further:
  I am understanding that getElementsByClassName returns an array like object, and document.getElementsByClassName(".sample_div")[0].innerHTML will kind of work, but it only returns the first element.  Perhaps there is a way to replace the 0 with the index of the div that is clicked on?</p>
  
  <p>Any way to do this with classes will be great. Thank you.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt;  
  
  &lt;div class='sample_div'&gt;Sample text ONE&lt;/div&gt;
  &lt;div class='sample_div'&gt;Sample text TWO&lt;/div&gt;
  
  &lt;/html&gt;
  
  &lt;script type="text/javascript"&gt;    
  
  const divs = document.querySelectorAll('.sample_div');
  
  divs.forEach(divSelect =&gt; divSelect.addEventListener('click', notice));
  
  function notice() {
    let text = document.getElementsByClassName('.sample_div').innerHTML;
    console.log(text);
  }
  </code></pre>