title: two separate observe() functions watching two different elements don't watch them
body: <p>I can't think of a better title but this is the situation:</p>
  
  <p>I want to watch two different elements in an intersection observer. On page has one element  </p>
  
  <p>My code at first looked like below:</p>
  
  <pre><code>  // page 1 element to watch
    const titleEl = document.querySelector('.table-header')
    // page 2 element to watch
    const pdTitleEl = document.querySelector('#section h2')
    const stickyPageEl = document.querySelector('.pagination-links--sticky')
  
    const handler = (entries) =&gt; {
      if (!entries[0].isIntersecting) {
        stickyPageEl.classList.add('dropdown-shadow')
      } else {
        stickyPageEl.classList.remove('dropdown-shadow')
      }
    }
    const observer = new window.IntersectionObserver(handler)
    // page 1 observer 
    observer.observe(titleEl)
    // page 2 observer 
    observer.observe(pdTitleEl)
  </code></pre>
  
  <p>My expectation was that it would watch both and wether one was intersection it would add a class. That was not the case. I got:</p>
  
  <blockquote>
    <p>Uncaught TypeError: Failed to execute 'observe' on
    'IntersectionObserver': parameter 1 is not of type 'Element'.</p>
  </blockquote>
  
  <p>I don't know what this means. What is "parameter 1"? </p>
  
  <p>The piece that got me thinking:</p>
  
  <blockquote>
    <p>is not of type 'Element'.</p>
  </blockquote>
  
  <p>I tried this:</p>
  
  <pre><code>  // page 1 element to watch
    const titleEl = document.querySelector('.table-header')
    // page 2 element to watch
    const pdTitleEl = document.querySelector('#section h2')
    const stickyPageEl = document.querySelector('.pagination-links--sticky')
  
    const handler = (entries) =&gt; {
      if ((!entries[0].isIntersecting) &amp;&amp; (titleEl)) {
    stickyPageEl.classList.add('dropdown-shadow')
  } else if ((!entries[0].isIntersecting) &amp;&amp; (pdTitleEl)) {
    stickyPageEl.classList.add('dropdown-shadow')
  } 
  else {
    stickyPageEl.classList.remove('dropdown-shadow')
  }
    }
    const observer = new window.IntersectionObserver(handler)
    // page 1 observer 
    observer.observe(titleEl)
    // page 2 observer 
    observer.observe(pdTitleEl)
  </code></pre>
  
  <p>Which I think checks to see if they exist first but I still get the same error.</p>
  
  <p>Can you run multiple <code>observe()</code> functions on different elements or is that not how this works?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>As commenter and myself noted in question this seems to be related to elements not existing in DOM which makes sense. </p>
  
  <pre><code>  // page 1 element to watch
    const titleEl = document.querySelector('.table-header')
    // page 2 element to watch
    const pdTitleEl = document.querySelector('#section h2')
    const stickyPageEl = document.querySelector('.pagination-links--sticky')
  
    const handler = (entries) =&gt; {
      if ((!entries[0].isIntersecting) &amp;&amp; (titleEl != null)) {
    stickyPageEl.classList.add('dropdown-shadow')
  } else if ((!entries[0].isIntersecting) &amp;&amp; (pdTitleEl != null)) {
    stickyPageEl.classList.add('dropdown-shadow')
  } 
  else {
    stickyPageEl.classList.remove('dropdown-shadow')
  }
    }
    const observer = new window.IntersectionObserver(handler)
    // page 1 observer 
    observer.observe(titleEl)
    // page 2 observer 
    observer.observe(pdTitleEl)
  </code></pre>
  
  <p>Doesn't work either.</p>
  
  <p>Why?</p>