title: Target multiple selectors in JS only
body: <p>I am trying to implement a click event on my site without jQuery.</p>
  
  <p>I want to target multiple selectors.</p>
  
  <p>In jQuery this can be done by simply comma seperating the items as shown below.</p>
  
  <pre><code>jQuery(document).on('click', '#test1, #test2', function (event) {
      alert($(this).text());
  });
  </code></pre>
  
  <p>How can this easily be done in plain javascript?</p>
  
  <p>I have tried the below which works but it seems like there should be a simpler way especially if I want more than an alert to occur on click?  I want to target more than one specific selector not all divs for example</p>
  
  <pre><code>var test1 = document.getElementById('test1');
  var test2 = document.getElementById('test2');
  
  if (test1.addEventListener || test2.addEventListener) {
      test1.addEventListener('click', function(event) {
          alert(this.innerHTML);
      });
      test2.addEventListener('click', function(event) {
          alert(this.innerHTML);
      });
  
      /* this only works when you click on test2
      (test1,test2).addEventListener('click', function(event) {
          alert(this.innerHTML);
      });
      */
      /* this only works when you click on test2
      (test1.addEventListener),(test2.addEventListener)('click', function(event) {
          alert(this.innerHTML);
      });        
      */
  }
  </code></pre>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    var test1 = document.getElementById('test1');
      var test2 = document.getElementById('test2');
      if (test1.addEventListener || test2.addEventListener) {
          test1.addEventListener('click', function(event) {
              alert(this.innerHTML);
          });
          test2.addEventListener('click', function(event) {
              alert(this.innerHTML);
          });
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="test1"&gt;test1&lt;/div&gt;
  &lt;div id="test2"&gt;test2&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Is there a way to comma seperate the selectors, or setup all selctors before running the code like you can with jQuery?</p>