komuniakt: 'document' is not defined

pytanie zadane 9 maja 2018 w JavaScript przez Regmar Nowicjusz (120 p.)

Dzień dobry!

Problem klasyczny, ponieważ w edytorze kodu pojawia mi się komuniakt:

'document' is not defined

Szukałem i próbowałem rozwiązań w wielu miejscach, także na tym forum, jednak nic nie pomaga. Nie wiem czy to ja już źle szukam/sprawdzam, czy problem faktycznie jest. Konsultowałem się w tej sprawie z jednym web developerem i z tego co usłyszałem "u niego działa". Proszę o pomoc.

Fragment kodu HTML odnoszący się do elementu i do pliku js. Poniżej kod w pliku js.

<body>
       <header>
          <nav>
          <i class="fas fa-bars"></i>
          </nav>
          
           <hgroup>
            <h1> Lorem ipsum dolor sit amet</h1>
            <h3><span> Lorem ipsum dolor sit amet,</span>
            consectetur adipiscing elit.</h3>
            </hgroup>
            
            <img src="img/foto.JPG">
            
            <div id="arrow"><i class="fas fa-angle-down"></i></div>
        </header>
<main>
  
</main>

<script src="js/java.js"></script>

</body>

var arrow = document.querySelector("#arrow");

Problem pojawił się przy próbie skorzystania z funkcji animate w jQuery. Przed plikiem js w htmlu dodałem AJAXa, a w pliku js:

arrow.addEventListener('click', function () {
    document.querySelector("body,html").animate({
        scrollTop: 400
    }, 1000);
});

Niestety animacja przewijania nie działa.

1 odpowiedź

odpowiedź 9 maja 2018 przez ProgramistaStepek Nałogowiec (27,020 p.)

document.querySelector("body,html").animate({
        scrollTop: 400
    }, 1000);

Nie możesz tak zrobić, bo .animate jest to metoda charakterystyczna dla obiektów jQ. Aby to zadziałało daj

$('body,html').animate({
        scrollTop: 400
    }, 1000);

IMO animowanie przez jQ to już raczej historia i lepiej jest użyć animacji CSS

1	komentarz 9 maja 2018 przez Comandeer Guru (601,110 p.) Nie możesz tak zrobić, bo .animate jest to metoda charakterystyczna dla obiektów jQ. https://developer.mozilla.org/en-US/docs/Web/API/Element/animate :P Niemniej składnia jest inna.

komentarz 9 maja 2018 przez ProgramistaStepek Nałogowiec (27,020 p.)

Zwracam honor.

komentarz 10 maja 2018 przez Regmar Nowicjusz (120 p.)

@ProgramistaStepek,
Przepraszam, powinienem napisać to wcześniej. Próbowałem wcześniej całość oprzeć na JQ, ale otrzymywałem podobny błąd, z tym że zamiast 'document' był '$'.

Myślałem, że maksymalne wyeliminowanie składni JQ rozwiąże problem.

Popatrzę za tym rozwiązaniem w css, nie mniej i tak nie rozumiem skąd ten błąd opisany na początku. :(

1	komentarz 10 maja 2018 przez Comandeer Guru (601,110 p.) Hmm… A to jest błąd tylko w edytorze? Bo na stronie to powinno działać bez problemu.

komentarz 10 maja 2018 przez Regmar Nowicjusz (120 p.)

Przepisałem kod na nowo, tym razem w całości w JQ i mimo tych błędów odpaliłem w przeglądarkach. Jest ok. ;) Problemy sprawiał ( i nadal sygnalizuje) tylko edytor kodu (Brackets). Dzięki!