Uncaught TypeError: Cannot read property ' ' of undefined を解決したい

Question

前提・実現したいこと

JavaScriptで一定時間経過するごとに文字を変更するようにしたいと思っています。
現状ではエラーが3つ出た後には問題なく文字が変わるようになっています。
最初に出てくるエラーを解決したいです。
どうぞよろしくお願い致します。

発生している問題・エラーメッセージ

Uncaught TypeError: Cannot read property 'classList' of undefined
    at footer.js:16

Uncaught TypeError: Cannot read property 'style' of undefined
    at footer.js:19

Uncaught TypeError: Cannot read property 'classList' of undefined
    at footer.js:24

該当のソースコード

<div class='ad-footer-contents'>
  <h2 class='maxim'>
      「釣りの格言」
  </h2>
  <div class =text-block>
    <ul>
      <li class="text is-active">釣れない時は魚が考える時間を与えてくれた与えてくれたと思えばいい</li>
      <li class="text">釣り人は、どんな冒険家よりも先回りしてそこにいる</li>
      <li class="text">釣りは盗むもんだ、聞くもんじゃない</li>
      <li class="text">魚釣りは数字のようなものだ。というのは、完全にマスターできないからだ</li>
    </ul>
  </div>
</div>

.ad-footer-contents {
  width: 100vw;
  background-image: image-url('Efishing.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10vh 15vh;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.9);
}

.maxim {
  font-size: 50px;
}

.text-block {
  width: 100vw;
  height: 15vh;
  text-align: center;
  font-size: 5vh;
  color: red;
  margin-top: 7vh;
}

.text {
  opacity: 0;
  transition: opacity 2s ease;
  transition: opacity 2s ease;
}
.text.is-active {
  opacity: 1;
  transition: opacity 2s ease;
  transition: opacity 2s ease;
}

const txt = document.getElementsByClassName('text');
let txtIndex = -1;

  function changeTxt() {
    txtIndex++;

    let currentNum = txtIndex % txt.length;
    let nextNum = (txtIndex + 1) % txt.length;
    let current = txt[currentNum];
    let next = txt[nextNum];

    setTimeout(function () {
      current.classList.remove('is-active');
    }, 3000);
    setTimeout(function () {
      current.style.display = 'none';
      next.style.display = 'block';
    }, 5100);

    setTimeout(function () {
      next.classList.add('is-active');
    }, 5200);
  };

  function showNextTxt() {
    setInterval(changeTxt, 6000);
  }

changeTxt();
document.addEventListener('DOMContentLoaded', showNextTxt, false);

試したこと

コードの文字が間違えていないか確認しました。
エラーコードの内容が「Uncaught TypeErrorで未定義の' 'を読み取ることができません。」となっていることを確認し調べているのですが解決方法が見つかりません。
皆様の力を貸していただけないでしょうか
回答お願いします。

補足情報（FW/ツールのバージョンなど）

下記のサイトを見て作成しています。
https://chocolat5.com/tips/setinterval-animation/

Comments

[yambejp]

footer.jsの16、19、24行目を確認してください

[yukitaka]

回答ありがとうございます。
エラーが出ている部分は下記のコードです。
current.classList.remove('is-active');
current.style.display = 'none';
next.classList.add('is-active');
このコードのどこが悪いのでしょうか？
初心者なので現状あまり分かっていない状態となっています。
よろしくお願いします。

Answer 1

currentになにが入ってるのか確認してみよう

Comments

[yukitaka]

console.log(current);
上記を記述しcurrentの中を見るとundefinedとなっていました。
currentが未定義と言うことがわかりました。しかし、どのように定義すると良いのでしょうか？
力を貸していただけないでしょうか
回答お願いします。

[yukitaka]

console.log(currentNum);で見てみると中身がNaNでした。
調べてみるとNaNは「数字ではないので、何らかの計算処理によって数値以外の値が発生した時に出現します。」となっていました。つまり計算内容に問題があると言うことですか？

[y_waiwai]

なら、そのcurrentの出どころがおかしいというはなしです
let current = txt[currentNum];

このtxt[なんたら]になにが入ってるかみよう

[yukitaka]

let current = txt[currentNum];の下にconsole.log(txt[currentNum])を記述で、初めはundefinedが出力され変わらずエラーが3つ出た後にHTMLで記述した格言が時間ごとに変更されます。
つまりtxt[なんたら]のなんたらは格言が入っていると言うことがわかりました。ただ、最初がundefinedになる理由がわかりません。
回答いただけないでしょうか？
よろしくお願いします。