Kevin Powell - Community•14mo ago

Intersection Observer error

Hi, I'm a UX designer trying to get that hang of coding in Vue JS. I wouldn't say it's going great, so here I am asking for some assistance to solve my current issue!

 Uncaught TypeError: IntersectionObserver.observe: Argument 1 is not an object.

 Uncaught TypeError: IntersectionObserver.observe: Argument 1 is not an object.

Code in question;

const movingCarSection = document.querySelector(".hidden");

const movingCarsOptions = {
  rootMargin: "5px 0px 0px 0px"
}

const movingCarsObservers = new IntersectionObserver(function(
  entries,
  movingCarsObservers
  ) {
    entries.forEach(entry => {
      if(!entry.isIntersecting){
        movingCarSection.classList.add("show");
      } else {
        movingCarSection.classList.remove("show");
      }
    });
}, movingCarsOptions);

  movingCarsObservers.observe(movingCarSection);

const movingCarSection = document.querySelector(".hidden");

const movingCarsOptions = {
  rootMargin: "5px 0px 0px 0px"
}

const movingCarsObservers = new IntersectionObserver(function(
  entries,
  movingCarsObservers
  ) {
    entries.forEach(entry => {
      if(!entry.isIntersecting){
        movingCarSection.classList.add("show");
      } else {
        movingCarSection.classList.remove("show");
      }
    });
}, movingCarsOptions);

  movingCarsObservers.observe(movingCarSection);

I've tried multiple different videos, there's also been times where it works only one time for some reason and refuses to do anything after each refresh. Now I keep getting the aforementioned error, looking online didnt give me much of an answer that I understood. Thanks!

62 Replies

Jochem•14mo ago

most likely, document.querySelector('.hidden') isn't returning anything

RakudaiOP•14mo ago

Is something wrong here then?

ἔρως•14mo ago

is the script in the <head> or at the end of the <body>?

RakudaiOP•14mo ago

At the end of the body

MarkBoots•14mo ago

use the console log and you'll see console.log(movingCarSection) after the queryselector

RakudaiOP•14mo ago

null

ἔρως•14mo ago

is that element created by another script or something?

MarkBoots•14mo ago

are you sure the classname is correct?

RakudaiOP•14mo ago

I'm sure, the only two instance of "hidden" are the within the element in the image above & the query selector No

ἔρως•14mo ago

can you show the full html then? not from the inspect element but from the source code

RakudaiOP•14mo ago

Its like 1200 lines

ἔρως•14mo ago

then do ctrl-f and find it in the code

RakudaiOP•14mo ago

Oh you mean it like that, my bad Hold on

MarkBoots•14mo ago

A little tip on the side: The classname "hidden" is quite generic. Maybe consider giving it a more describing name. Like ".movingcar" or someting

ἔρως•14mo ago

or use the id

RakudaiOP•14mo ago

Svg is like this just to see if I can get it working at all, if it causes the issue, hopefully not.

message.txt

MarkBoots•14mo ago

ah, it is an id. your queryselectorr is wrong, instead of a dot, use the hashtag # document.querySelector("#hidden");

ἔρως•14mo ago

he's selecting by the class

RakudaiOP•14mo ago

Gotcha, yeah I've been looking at various tutorials from different creators and websites, seeing if anything works lol 5 hours later

MarkBoots•14mo ago

ohw sorry, my mistake

ἔρως•14mo ago

that's not the generated html

MarkBoots•14mo ago

it should have been okay, i was focussing on the id

RakudaiOP•14mo ago

Im not sure what you mean then sorry

ἔρως•14mo ago

ctrl+u > ctrl+a > ctrl+c > alt+tab > ctrl-v view source, select all, copy, alt-tab, paste

RakudaiOP•14mo ago

I can't show everything in my code, half of it would bring me in trouble 😅 I can do the script though

message.txt

ἔρως•14mo ago

that doesnt help at all the generated html is extremely important without it, its speculation, guesses and little more than sprinkling magic dust if the web page is accessible online, then it helps too

MarkBoots•14mo ago

no it's not.
As long as we know the element is loaded in the dom before the script runs, it's fine. So please inspect for yourself (f12) if the car element is on the page before that script

ἔρως•14mo ago

you dont you dont know anything because we have little to nothing i can reproduce that problem with 4 lines of code or even 3

<script>
document.querySelector('.hidden').textContent = 5;
</script>
<div class="hidden"></div>

<script>
document.querySelector('.hidden').textContent = 5;
</script>
<div class="hidden"></div>

that should be enough to trigger the error so, no full html, or a minimal subset of that html that triggers the error, we have nothing to work off of

MarkBoots•14mo ago

OP is not willing to share all of the code (which I can totaly understand if it is workrelated) . You should not ask for that. Only the relevant part helps. Your example is totaly irrelevant as well. We already asked if the scripts was loaded after the html was loaded in the dom. We have seen the 2 different parts, only thing we're not sure of is in what order it's on the page (OP can check that themselves).

ἔρως•14mo ago

its fine if he doesnt want to share the code which is why i asked a small subset that triggers it, or a link where we can see the full generated code if it exists both of which arent trade secrets or anything because your browser receives that but without a real (trimmed or untrimmed) html document, everything else is speculation im just asking a copy of everything/part that the browser receives when the page is accessed by the browser if that is trade secret as well, its the end of the road ive shown you how to reproduce the same problem in 4 lines of html+js and it fits the entire description of what was shared without the html the browser receives, the best i can do is to tell you to wrap everything in a ready event handler something like this:

window.addEventListener('load', () => {
...
});

window.addEventListener('load', () => {
...
});

RakudaiOP•14mo ago

Sorry, asked a colleague that doesnt know js just to be sure. He doesnt understand it either Let me read the messages, sorry Yeah, it's work related! It's gonna be public eventually though there's multiple calls to our servers etc, and some other stuff that's pretty sensitive

ἔρως•14mo ago

then when you view the source that the browser receives, can you find the element there?

Jochem•14mo ago

What does document.querySelector('.hidden') return in the browser console?

RakudaiOP•14mo ago

Null

RakudaiOP•14mo ago

Changed hidden to henk, just to see if that was the issue

Jochem•14mo ago

I assume this is before you changed it to class="henk"?

RakudaiOP•14mo ago

Before and after

ἔρως•14mo ago

thats the element inspector

Jochem•14mo ago

queryselector('.henk')?

ἔρως•14mo ago

not the source that's sent to the browser

RakudaiOP•14mo ago

Yeah I just changed the name to see if that worked, but it did not

Jochem•14mo ago

that's really bizarre, I mean, the class="henk" is right there on the screen and document.querySelector('.henk') in the console should 100% find that element

MarkBoots•14mo ago

can you uncollapse the <head> tag for us

Jochem•14mo ago

you're using the dev tools console on that page, right?

RakudaiOP•14mo ago

Yeah

MarkBoots•14mo ago

and your script is just before the closing </body> right?

RakudaiOP•14mo ago

It's in the app.vue file, so just after </main></template>

RakudaiOP•14mo ago

Its in <div id="app"></div>

MarkBoots•14mo ago

okay, here it gets in the vue territory, i have to pull out. not enough experience with it.

RakudaiOP•14mo ago

Gotcha, really appreciate the help

Jochem•14mo ago

It's likely your app isn't loaded yet at that point. Your browser will hit the script tag immediately after loading the div#app, which won't have Vue mounted yet

RakudaiOP•14mo ago

Does mounted() {} play a role here?

Jochem•14mo ago

~~iirc, there's an onmount lifecycle function in Vue that you can hook into, you'll have to run your querySelector (and all the rest) inside the onmount~~ Yes, that's the one! you have to run your code inside mounted() on your component

RakudaiOP•14mo ago

I've tried onmounted, it didnt seem to work Ill have a look

Jochem•14mo ago

it's been an Age since I used vue, just after they implemented the Composition api

ἔρως•14mo ago

and the main.js is what has that js code you sent in the first message? if it is, you need to move the vite code before that script

RakudaiOP•14mo ago

Appreciate the help guys, work day is over, too frustrated too continue figuring it out 🫡 Enjoy your weekend

NickDJM•14mo ago

If this is entirely inside the vue app, you can use a ref instead. Add ref="movingCars" to your element, and then in your mounted() hook, you can use this.$refs.movingCars instead of your query selector- this is assuming you're using options API though. Composition API you'd have to make a const movingCars = ref(null); and then add your ref="movingCars" to your element. Then in the onMounted() hook you should be able to access the referenced element. I would be interested to see if that changes anything.

NickDJM•14mo ago

The official docs have some good examples for this: https://vuejs.org/guide/essentials/template-refs.html

Template Refs | Vue.js

Vue.js - The Progressive JavaScript Framework

RakudaiOP•14mo ago

Hi, I did not see your message. But you're right, its entirely in the Vue app. I'll have a look and see if it works. Thank you

Gaming

Programming

Intersection Observer error