Почему код для замены текста в кнопке один работает, а второй нет, кто понимает разницу?

Question

[senaj]

let btnText = document.querySelector('[data-blogsBtn]');
      btnText.addEventListener('click', function () {
         if (this.dataset.trigger == 'false') {
            this.innerText = 'Close';
            this.dataset.trigger = true;
         } else {
            this.innerText = this.dataset.text;
            this.dataset.trigger = false;
         }
      });

let btnText = document.querySelector('[data-blogsBtn]');
      btnText.addEventListener('click', function () {
         if (this.innerText == 'All Blog') {
            this.innerText = 'Close';
         } else {
            this.innerText = 'All Blog';
         }
      });

Вот в чём вопрос. Верхний код работает, а нижний нет. Что я не правильно использовал. Атрибут на querySelector от другого кода, там всё работает, но он себя тут очень хорошо чувствует. Хотел через общий класс для кнопок btn, код с ним не хочет работать. С другими классами работает, а с btn не хочет. Если кто знает почему с классом не работает, скажите, не держите в себе!

Comments

[ThunderCat]

В песочницу. А то гадалки все в отпуске...

[Ankhena]

Работает и второй прекрасненько https://codepen.io/AnnaSummer/pen/xxQzadG
Естественно, если нет второй такой же кнопки (потому что querySelector находит первый элемент, подходящий под условие ) и такого же скрипта (ибо каша какая-то).

Наверное, имеет смысл почитать про querySelector и querySelectorAll и потом про коллекции, циклы.

[senaj]

Ankhena, Вот от не работающей https://codepen.io/valentynovich/pen/KKrexqr

[senaj]

Ankhena, вот работающая https://codepen.io/valentynovich/pen/NWYMbJP.
Что удивительно в codepen и с классом заработало. Походу надо разбираться со стилями.
А та которая не рабочая тоже походу из-за стилей.

[Ankhena]

senaj, console.log(this.innerText); прояснит ситуацию. Увидите, что там натворил ваш text-transform.

Поэтому, нужно делать песочницы с демонстрацией проблемы, а не просто куски кода.

Лучше всё таки завязываться на наличие класса или data

[senaj]

По поводу querySelector и каши, да вы правы я уже понял. Проблема с классом решена. И в остальном разобрался, проблема с регистром в стилях. Всё расходимся, всем спасибо.