Как к выделенному тексту добавить класс?

Question

[Алексей Яковлев]

Я выделяю текст и к этому выделенному тексту нужно добавить класс.

Ошибка: Cannot read property 'toggle' of undefined

script.js:

const sendBtn = document.querySelector('.sendBtn'),
    close = document.querySelector('.close'),
    message = document.querySelector('textarea'),
    blockSettingsFontStrong = document.querySelector('.block-settings-font-strong'),
    blockSettingsFontItalic = document.querySelector('.block-settings-font-italic'),
    blockSettingsFontLine = document.querySelector('.block-settings-font-line'),
    leftText = document.querySelector('.left-text'),
    centerText = document.querySelector('.center-text'),
    rightText = document.querySelector('.right-text'),
    clearMessage = document.querySelector('.clear-message'),
    blockFonts = document.querySelector('.block-fonts'),
    blockFontsFonts = document.querySelector('.block-fonts-fonts'),
    arial = document.querySelector('.arial'),
    roboto = document.querySelector('.roboto'),
    rubik = document.querySelector('.rubik'),
    toInput = document.querySelector('.toInput'),
    subjectInput = document.querySelector('.subjectInput');

clearMessage.addEventListener('click', () => {
    message.value = '';
    toInput.value = '';
    subjectInput.value = '';
});

blockFonts.addEventListener('click', () => blockFontsFonts.classList.toggle('block-hidden'));

message.addEventListener('select', event => {
    const selection = event.target.value.substring(event.target.selectionStart, event.target.selectionEnd);

    blockSettingsFontStrong.addEventListener('click', () => selection.classList.toggle('strong'));
    blockSettingsFontItalic.addEventListener('click', () => selection.classList.toggle('italic'));
    blockSettingsFontLine.addEventListener('click', () => selection.classList.toggle('line'));

    leftText.addEventListener('click', () => selection.classList.toggle('left-text'));
    centerText.addEventListener('click', () => selection.classList.toggle('center-text'));
    rightText.addEventListener('click', () => selection.classList.toggle('right-text'));

    arial.addEventListener('click', () => selection.classList.toggle('arial'));
    roboto.addEventListener('click', () => selection.classList.toggle('roboto'));
    rubik.addEventListener('click', () => selection.classList.toggle('rubik'));
});

Comments

[Роман Сарваров]

При выделении нужно обернуть выделенный текст в <span></span> и затем на этот span повесить необходимый класс.

[Mikola-BLR]

После объявления selection выведите в консоль, что у вас в этой константе лежит и посмотрите, есть ли у этого чего-то classList.
Получается, что selection.classList не существует (undefined) и вы пытаетесь у этого несуществующего вызвать метод toggle.
classList существует у элемента, а кусок выделенного текста, как мне кажется, элементом не является.

Если вы хотите как-то изменить выделенный текст внутри textarea, то можно воспользоваться селектором псевдоэлемента ::selection, но у него ограниченный набор стилей, которые можно изменить.

textarea::selection {
    color: red;
    background: yellow;
}

Answer 1

[Mazino]

Ну вы пытаетесь у строки вызвать свойство classList, а поскольку оно undefined вы получаете эту ошибку, вам нужно этот текст сначала обернуть в какой-нибудь html тег, а уже к нему добавлять классы

Answer 2

[Александр Епихин]

Если конечная цель несложная стилизация выделенного текста, то можно сделать через псевдоэлемент ::selection