Problem z eksportowaną funkcją

0

Witam mam problem z eksportowaną funkcją, która służy do znajdywania elementu w oknie. Eksportuje ją do pliku skills.js jednak zwracaisInViewport.js:2 Uncaught TypeError: elem.getBoundingClientRect is not a function
at isInViewport (isInViewport.js:2)
at window.addEventListener (skills.js:6) , dziwne jest to, że wykorzystałem już ją w jednym pliku i działało poprawnie. Dodam jeszcze, że przez import nie pobiera mi skillsDiv.
Skills.js

import {
    isInViewport
} from './isInViewport.js';
const skillsDiv = document.querySelectorAll('.app-skills--div');
window.addEventListener('scroll', () => {
    if (isInViewport(skillsDiv)) {
        skillsDiv.forEach(() => {
            skillsDiv.style.backgroundColor = "red";
        })
    }
});

isInViewport.js

export const isInViewport = (elem) => {
    let bounding = elem.getBoundingClientRect();
    return (
        bounding.top >= 0 &&
        bounding.left >= 0 &&
        bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
};

Jak linkuje skrypty

<script src="js/nav.js"></script>
<script src="js/about.js" type="module"></script>
<script src="js/skills.js" type="module"></script>
2

Nie masz problemu z funkcję zdefiniowaną przez siebie, tylko elem.getBoundingClientRect:

Uncaught TypeError: elem.getBoundingClientRect is not a function

Oznacza to, że przekazujesz obiekt, który nie posiada tej metody. I w rzeczy samej tak jest, ponieważ przekazujesz NodeListę (querySelectorAll zwraca NodeListę). Musisz pobrać jeden element używając querySelector lub przekazać do Twojej funkcji pojedyncze elementy.

1
skillsDiv.forEach(() => {
    skillsDiv.style.backgroundColor = "red";
})

Jesteś pewien, że nie chciałeś mieć czegoś w stylu:

skillsDiv.forEach((skillDiv) => {
  skillDiv.style.backgroundColor = 'red';
});
0

@Raloseq: odp. na temat w postach, proszę.

Nie wiem, co chcesz osiągnąć, czy potrzebujesz, żeby wszystkie elementy o tej klasie były w polu widzenia, czy tylko jeden (obojętnie który), czy pierwszy z nich.

0

Chcę zrobić jakąś prostą animacje wsuwania,pojawiania się będę to dodawał poprzez classList.add i muszę znaleźć te elementy w oknie window.scrollY odpada bo musi się dostosować do każdego ekranu.

1 użytkowników online, w tym zalogowanych: 0, gości: 1