Почему код для замены текста в кнопке один работает, а второй нет, кто понимает разницу?
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.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'; } }); |
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 не хочет. Если кто знает почему с классом не работает, скажите, не держите в себе!
Дополнительно:
В песочницу. А то гадалки все в отпуске...
Естественно, если нет второй такой же кнопки (потому что querySelector находит первый элемент, подходящий под условие ) и такого же скрипта (ибо каша какая-то).
Наверное, имеет смысл почитать про querySelector и querySelectorAll и потом про коллекции, циклы.
Что удивительно в codepen и с классом заработало. Походу надо разбираться со стилями.
А та которая не рабочая тоже походу из-за стилей.
Поэтому, нужно делать песочницы с демонстрацией проблемы, а не просто куски кода.
Лучше всё таки завязываться на наличие класса или data
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для начала, давайте рассмотрим два примера кода для замены текста в кнопке:
Пример 1:
var button = document.getElementById('myButton'); button.innerText = 'Новый текст кнопки';
Пример 2:
var button = document.getElementById('myButton'); button.innerHTML = 'Новый текст кнопки';
Оба примера кода выше пытаются заменить текст на кнопке с id "myButton" на строку "Новый текст кнопки". Однако, есть существенная разница между использованием свойств innerText и innerHTML.
Свойство innerText устанавливает или возвращает текстовое содержимое элемента, игнорируя любые вложенные элементы HTML. Это означает, что если вы используете innerText для замены текста в кнопке, все HTML теги внутри кнопки будут проигнорированы.
С другой стороны, свойство innerHTML устанавливает или возвращает содержимое элемента в виде HTML. Это означает, что если вы используете innerHTML для замены текста в кнопке, вы можете вставить HTML теги внутри кнопки.
Таким образом, если вам необходимо просто заменить текст на кнопке без учета HTML тегов, то лучше использовать innerText. Если же вам нужно вставить HTML теги в текст кнопки, то следует использовать innerHTML.
Надеюсь, это объяснение поможет вам понять разницу между этими двумя подходами к замене текста в кнопке. Если у вас остались дополнительные вопросы, не стесняйтесь задавать.