Niespodziewany undefined

Question

Cześć,

Jestem w trakcie robienia takiej swojej strony. Od razu zaznaczam, że ona jest jeszcze nie responsywna i jeśli szanujecie swój wzrok to nie wchodźcie jeszcze na nią na telefonie :D Layout po kolei robiłem od góry do dołu i wszystko było ok, aż do czasu gdy zauważyłem, że w pliku typing.js wkradł się błąd.

Ogólnie rzecz biorąc kod z tego pliku odpowiada za tę animacje 'pisania' na głównym banerze. I po napisaniu pokazuje, że wartość txtElement czyli zmiennej przechowującej wszystkie nagłówki, gdzie ma być ten tekst napisany jest undefined.

 

Poniżej daje ten kod, który mnie interesuje, jak ktoś woli to daje też link do pełnej strony: https://davidelo18.github.io/one-page-wbst/

 

Struktura HTML:

<div class="banner">
        <hgroup>
            <h1 class="text-type-first typing"></h1>
            <br>
            <h1 class="text-type-second"></h1>
        </hgroup>
        <div class="go-down-btn">\/</div>
    </div>

 

Skrypt JS:

// functions to do after loading the DOM
document.addEventListener('DOMContentLoaded', function () {
    typeWriter();
});

/* --- DECLARED FUNCTIONS AREA --- */

// typing animation the 'welcome' word
const txtElements = document.querySelectorAll('.banner hgroup h1');
const words = ['Welcome!', 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.'];
let currentPosition = 0;
let myIndex = 0;
const delayTime = [300, 90];

function typeWriter() {
    let visibleWord = words[myIndex].substring(0, currentPosition);
    txtElements[myIndex].textContent = visibleWord;

    if (currentPosition < words[myIndex].length) {
        currentPosition++;
        setTimeout("typeWriter()", delayTime[myIndex]);
    } else {
        txtElements[myIndex].classList.remove('typing');
        if(myIndex < words.length){
            myIndex++;
            txtElements[myIndex].classList.add('typing');
            currentPosition = 0;
            setTimeout("typeWriter()", 400);
        }
    }
}

Comments

Ok więc błąd pojawia się dopiero na końcu dodaj sobie console.log w tym miejscu gdzie znajduje się błąd i sprawdź co wyświetli ci się jako txtElements[myIndex] kiedy pojawia się błąd prawdopodobnie przekraczasz ilość elementów.

---

@Davidelo18, wydaje mi się, że jest to błąd dotyczący indeksów tablicy oraz jej długości. Posprawdzaj to

---

@Davidelo18,

addEventListener() jako drugi argument nie przekazuj funkcji anonimowej tylko nazwę funkcji callback bez wywołania.

---

@kenjiro244,

@Kondzio,

Dzięki Wam :D Faktycznie, głupi błąd. Po prostu na końcu myIndex osiągał 2 a elementów w tablicy jest tylko 2, czyli próbował odczytać trzeci element, a takiego nie ma. Dzięki jeszcze raz :D

Answer 1

        if(myIndex < words.length){
            myIndex++;
            txtElements[myIndex].classList.add('typing');

Czyli tak... txtElements ma dwa elementy. myIndex na początku jest 0.

W pierwszej iteracji zwiększasz myIndex do 1, po czym czytasz txtElements[1].

W drugiej iteracji zwiększasz myIndex do 2, po czym czytasz txtElements[2] - wychodzisz poza tablicę.

Wydaje się, że po prostu masz nie do końca dobrze określony warunek końca.

Comments

Tak, masz racje. Właśnie ogarnąłem tyle co. Taki głupi błąd ;) Dzięki :D

---

To ja tylko dodam jako "reklama", że z async/await ten kod byłby trochę czytelniejszy - rekursja z setTimeout wymusza pilnowanie większego stanu poza funkcję i więcej testów przy każdym wejściu do funkcji. Z async/await kod piszesz "bezpośrednio" - zwykłe dwie pętle, która dla każdego słowa i litery pokazują je z opóźnieniami. To też oznacza mniej bugów ;)

Przykład przepisania Twojego kodu (choć napisany na sucho):

// boilerplate
function sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); }

const txtElements = document.querySelectorAll('.banner hgroup h1');
const words = ['Welcome!', 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit.'];
const delayTime = [300, 90];

async function typeWriter() {
    for (let i = 0; i < words.length; ++i) {
        txtElements[i].classList.add('typing');
        for (let c of words[i]) {
            txtElements[i].textContent += c;
            await sleep(delayTime[i]);
        }
        txtElements[i].classList.remove('typing');

        await sleep(400);
    }
}

 

---

Dzięki wielkie za radę :D async rozumiem że to coś związane z AJAX, asynchronicznym JS? Jeśli tak to jeszcze do niego nie dotarłem, ale pewnie już niedługo :D

---

async rozumiem że to coś związane z AJAX, asynchronicznym JS?

Z asynchronicznością tak, z AJAXem niekoniecznie.

async/await to wynik ewolucji języka w celu lepszej obsługi asynchronicznego kodu. Chodzi o to, że kiedy kod wykonuje się "później" (u Ciebie "później" oznacza setTimeout, u innych po otrzymaniu odpowiedzi AJAXem, u innych co innego), ciężko trzyma się stan aplikacji. Widziałeś to sam w swoim kodzie - musiałeś trzymać zmienne globalne, by funkcja przy kolejnych wywołaniach pamietała, na którym słowie/literze była. Z async/await możesz pisać kod "normalnie", tak, jakby był zwykłą funkcją ze zmiennymi lokalnymi etc.