Błąd z string.indexOf()

Question

Cześć,

Właśnie kończę jedną stronę i natknąłem się na błąd, który nie wiem skąd się wziął. O to kod, którego błąd dotyczy:

const substringOfHrefAttributes = (prefix, locationPathNameBeforePushState) => {
    const header = document.querySelector('.header');
    const phoneHeader = document.querySelector('.phone-header');
    const phoneMenu = document.querySelector('.phone-menu');
    const footer = document.querySelector('.footer');

    const aLinks = [Array.from(header.querySelectorAll('a')), Array.from(phoneHeader.querySelectorAll('a')), Array.from(phoneMenu.querySelectorAll('a')), Array.from(footer.querySelectorAll('a'))].flat();

    aLinks.forEach(aLink => {
        const hrefAttr = aLink.getAttribute('href');
        const indexOfPrefix = hrefAttr.indexOf(prefix);
        console.log(hrefAttr, indexOfPrefix);
        const prefixOfALink = hrefAttr.slice(0, indexOfPrefix + prefix.length);
        const targetOfALink = aLink.getAttribute('target');

Błąd dotyczy 14 linki kodu powyżej, o to on:

Tutaj jeszcze daję wywołanie tej funkcji i od razu mówię, że view.prefix jest zdefiniowane:

substringOfHrefAttributes(view.prefix, locationPathNameBeforePushState);

Może się wydawać że powinienem wiedzieć skąd ten błąd ale już mówię o co chodzi. Otóż jak wyświetlam tą zmienną w konsoli, której dotyczy błąd (linijka 15 pierwszej części kodu) to już wyświetla mi poprawną wartość tak jak by wszystko zadziałało pozytywnie, a mimo to wywala mi błąd.

błąd razem z console.log - iem :

I teraz nie wiem o co chodzi bo niby coś nie działa i wywala mi błąd przy tworzeniu tej zmiennej, ale jak już ją wyświetlam w konsoli to wszystko jest ok, tak jak by działało. Ta sytuacja dzieje się zarówno w Firefox jak i w Brave oraz Chrome. Jeśli ktoś wie o co może chodzić, to prosiłbym o pomoc.

Z góry dziękuję i pozdrawiam.

Comments

W konsoli wyświetlasz te zmienne po linijce, w której rzekomo znajduje się błąd. Więc jeśli błąd się pojawia, to console.log nie zostanie wywołany. Żeby się dowiedzieć, czy hrefAtr faktycznie jest nullem, gdy pojawia się błąd, to podziel console.log na dwa: jeden dla hrefAtr (wstaw go tuż pod deklaracją tej zmiennej) i drugi dla indexOfPrefix. Możesz dodatkowo w pierwszej linijce callbacka do forEach (czyli w 10 linijce wstawionego bloczka) dodać console.dirxml('aLink:', aLink), żeby dowiedzieć się jakie atrybuty posiada ten anchor.

[edycja]

Błąd dotyczy 14 linki kodu powyżej

Na pewno 14, a nie 11? Jedyny indexOf w tym kodzie jest w linii 11.

---

ja nawet po staku widzę że błąd leci z lini 18-stej.

---

Ale kod z bloczka nie koniecznie pokazuje cały kod. Więc linijki wskazane w stacku błędu nie muszą pokrywać się z tym, co jest w bloczku.

---

@ScriptyChris,
zrobiłem to co radziłeś w pierwszym komentarzu i rzeczywiście jeden z linków jakie pobierałem nie miał atrybutu href. Zamieniłem go więc na buttona bo nie ma sensu, żeby był to link skoro nigdzie nie przekierowuje. Jeszcze raz dziękuję.

Answer 1

const hrefAttr = aLink.getAttribute('href');

z debuguj co to zwraca funkcja getAtribute, i czym u Ciebie jest  "hrefAttr", bo zwraca Ci to element, który nie posiada funkcji indexOf 

stad nie  możesz wywołać na tym elemencie indexOf. 

  const indexOfPrefix = hrefAttr.indexOf(prefix);

bo na razie wnioskuje, że nie istnieje wskazany atrybut dla elementu który wpisałeś, byc może to zły element jest :)  i aLink to nie jest link i nie posiada tego atrybutu