title: Uncaught TypeError: Cannot read property 'click' of undefined
body: <p>I am using the following JS code in a function to logout of a website on Chrome:</p>
  
  <pre><code>var docLogout = document.querySelector('.submit.logout');
  docLogout.click();
  </code></pre>
  
  <p>I get error:</p>
  
  <pre><code>'Uncaught TypeError: Cannot read property 'click' of undefined'
  </code></pre>
  
  <p>This is because I need to make sure that the class of the button exists first and I do that with following steps which I figured out:</p>
  
  <ul>
  <li><p>Use "select an element in page to inspect it" button (first button on the far left of the developer tools)</p></li>
  <li><p>Click on the Logout button to inspect it</p></li>
  <li>The Elemets tab opens up</li>
  <li>The Elements field highlights the line <code>&lt;button type="submit" class="submit logout"&gt;Log out&lt;/button&gt;</code></li>
  <li>I then click on the Console tab</li>
  <li>Paste my code again and it works (any button on the same page will work thereafter)</li>
  </ul>
  
  <p>How can I avoid this manual step of making the elements be known first with the above steps? is there a way to expand all DOM elements initially when the website loads a different page to avoid "Cannot read property 'click' of undefined'" error without any human interaction of using the inspect elements button first?</p>
  
  <p>NOTE: at least explain the donevotes so that I can engage you!!!!!!</p>