Problem z eksportowaną funkcją

Problem z eksportowaną funkcją
Raloseq
  • Rejestracja:prawie 7 lat
  • Ostatnio:2 dni
  • Postów:286
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

Kopiuj
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

Kopiuj
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

Kopiuj
<script src="js/nav.js"></script>
<script src="js/about.js" type="module"></script>
<script src="js/skills.js" type="module"></script>
edytowany 1x, ostatnio: Raloseq
DE
  • Rejestracja:ponad 9 lat
  • Ostatnio:11 miesięcy
  • Postów:1788
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.

edytowany 1x, ostatnio: Desu
Raloseq
Aaa ok właśnie też się dziwiłem czemu przez to mi nodeliste wywala, a jest jakaś metoda na to ?
DE
const skillsDiv = [...document.querySelectorAll('.app-skills--div')]; nie jestem pewien czy zadziała ale chyba tak. Poprawcie mnie jak się mylę.
Patryk27
Moderator
  • Rejestracja:ponad 17 lat
  • Ostatnio:prawie 2 lata
  • Lokalizacja:Wrocław
  • Postów:13042
1
Kopiuj
skillsDiv.forEach(() => {
    skillsDiv.style.backgroundColor = "red";
})

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

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

Raloseq
zamieniłem to na "e" ale tutaj nie ma więc słuszna uwaga :D
DE
  • Rejestracja:ponad 9 lat
  • Ostatnio:11 miesięcy
  • Postów:1788
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.

Raloseq
  • Rejestracja:prawie 7 lat
  • Ostatnio:2 dni
  • Postów:286
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.

edytowany 1x, ostatnio: Raloseq

Zarejestruj się i dołącz do największej społeczności programistów w Polsce.

Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.