0

I'm trying to use the IntersectionObserver but keep receiving the above error, the code is as follows:

HTML:

<div class="top">

   <div class="toph1">
<h1><span>Turtle</span> Web Designs</h1>
  </div>                     

  <div id="hamburger">
     <div id="hamburger-lines">
        <span class="line"></span>
        <span class="line"></span>
        <span class="line"></span>
    </div>

     <ul id="menu">
         <li><a href="#showcase">Home</a></li>
         <li><a href="#aboutus">About Us</a></li>
         <li><a href="#cards">Services</a></li>
         <li><a href="#contactus">Contact Us</a></li>
    </ul>
  </div>

Javascript:

let sectionMenu = document.querySelector(".top");

  let options = {
    root: document.querySelector('null'),
    rootMargin: '0px',
    threshold: 1.0   };

  let callback = (entries, observer) => {
    entries.forEach(entry => {
        console.log(entry.target);
    });   };

  let observer = new IntersectionObserver(callback, options);

  observer.observe(sectionMenu);

Any assistance would be greatly appreciated, thank you.

TheFlyingCamel
  • 1
  • 1
  • `observe` is telling you that its first argument isn't an object. That first argument is `sectionMenu`, which you get via `document.querySelector(".top")`. If it's not an object, it's `null`, meaning that the element wasn't found when `querySelector` ran. See the linked question's answers for details. – T.J. Crowder Mar 09 '20 at 11:45
  • 1
    Side note: In your options, you have `root: document.querySelector('null')`. Do you really have an element in your page with the **tag** name `null`? E.g., `...`? Or should that be some tag name, or a class selector, or... – T.J. Crowder Mar 09 '20 at 11:46
  • ```document.querySelector('null')``` such an element doesn't exist in your html file. – Wiktor Mar 09 '20 at 11:47
  • @T.J. Crowder, I have checked the linked answer, many thanks, i moved the javascript link to just before the body tag in the html, but now its giving me the following error: TypeError: Argument 1 of IntersectionObserver.observe does not implement interface Element. – TheFlyingCamel Mar 09 '20 at 12:07
  • @TheFlyingCamel - I'm fairly sure you won't get that error from the code above. Since this question's basic problem is solved (it was getting `null` for `sectionMenu`), I suggest posting a new question with a **runnable** [mcve] demonstrating the problem (e.g, that error message) using Stack Snippets (the `[<>]` toolbar button; [here's how to do one](https://meta.stackoverflow.com/questions/358992/)). – T.J. Crowder Mar 09 '20 at 12:14

0 Answers0