title: Jquery make listeners work even if some elements are not present
body: <p>I'm new to JS, this is for my one of class project. </p>
  
  <p>I had some buttons with inline onclick for selecting some checkboxes. </p>
  
  <p>To clarify it further more:</p>
  
  <blockquote>
    <p>Page 1 has button named 1. Page 2 has button named 2.  Page 3 has both
    button 1 and 2</p>
  </blockquote>
  
  <p>Then I tried to get rid of inline onclick using Jquery and this code. This is the code I'm using for Button 1 and Button 2. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>var btn = document.querySelector("button.buttona-1");
  btn.addEventListener("click", selectArts);
  function selectArts() {
      unselectAll();
      let boxes = $(".scores").toArray();
      $('#ch_1, #ch_2').prop('checked', !0)
  }
  
  
  var btn = document.querySelector("button.buttonb-2");
  btn.addEventListener("click", selectBusiness);
  function selectBusiness() {
      unselectAll();
      let boxes = $(".scores").toArray();
      $('#ch_3, #ch_4').prop('checked', !0)
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>Issue is I'm getting console errors for page 1 and page 2 because not all the buttons are present there. </p>
  
  <p>Only page 3 is working fine because it has both buttons. </p>
  
  <p>How do I fix this? Any advise would be greatly appreciated.</p>