title: JS check if getElementById exists
body: <p>This is part of my class homework. It is a small web application. The code part below is a function for a select button (checkbox). The code is working fine.</p>
  
  <p>My issue is I get this error on console:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot set property 'checked' of null<br>
        at selectGirls (indexj.js:163)<br>
        at HTMLAnchorElement.onclick (index.html:137)  </p>
  </blockquote>
  
  <p>I know I get this error because, I haven't these elements on every page. To clarify that, I mean page 1 has two checkboxes, but page 2 has 5 checkboxes, like that. </p>
  
  <p>I want to use this same JS file for all pages. My question is how can I avoid these console errors best way possible? I do not want to make them hide from console as a solution. I really appreciate your input.</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-js lang-js prettyprint-override"><code>function selectAllStudents() {
      unselectAllStudents();
      let boxes = $(".scores").toArray();
      document.getElementById('check_Terrilyn').checked = true;
      document.getElementById('check_Vinnie').checked = true;
      document.getElementById('check_Boren').checked = true;
      document.getElementById('check_Tempie').checked = true;
      document.getElementById('check_Mapes').checked = true;
      document.getElementById('check_Fletcher').checked = true;
      document.getElementById('check_Bovee').checked = true;
      document.getElementById('check_Figgs').checked = true;
  }</code></pre>
  </div>
  </div>
  </p>