Как выделить номер активной строки курсора в редакторе ⇐ CSS

[Гость]

Я пытаюсь выделить текущую активную строку в элементе нумерации. Я могу получить текущую строку, вызванную активностью курсора в текстовой области. Однако я не могу эффективно использовать эту информацию для управления фоном CSS вокруг активной строки в моем блоке нумерации.

Я попробовал следующий код, но он не работает.

Как мне решить эту проблему?

const ta = document.querySelector('textarea') функция updateRowNumbering() { const num = ta.value.split("\n").length; const Numbers = ta.parentNode.querySelector(".numbers"); Numbers.innerHTML = Array(num).fill(``).join(""); } ta.textContent = `Я люблю Танзания Насила Америка Футбол JavaScript шахматы Анг Пробинсяно Время начала Китай ` updateRowNumbering(); функция getCurrentLineNumber() { // Получаем позицию курсора в текстовой области. const caretPosition = document.querySelector('#textarea').selectionStart; // Получаем текст текстовой области. const text = document.querySelector('#textarea').value; // Разбиваем текст на строки. const accumulativeArray = [0]; // Перебираем строки текста и добавляем длину каждой строки в накопительный массив. constlines = text.split('\n'); for (пусть я = 0; я value > caretPosition); return /*caretPosition/*/lineNumber//+`caretPosition`+accumulativeArray//lines.length - 1; } функция выделенияLineNumber(lineNumber) { // Получаем элемент div нумерации. constnumberingDiv = document.querySelectorAll('.editor > .numbers > span'); // Получаем элемент диапазона, соответствующий заданному номеру строки. const lineNumberSpan = нумерацияDiv[lineNumber-1] lineNumberSpan.style.backgroundColor = 'серый'; } //пользователь нажал на строку, соответствующую нумерации div: const NumberBG = document.querySelector('#textarea'); NumbersBG.addEventListener('click', function(event) { // Получаем номер строки, на которую нажал пользователь. const currentlinenumber = getCurrentLineNumber() // Выделяем серым фоном соответствующий регион с тем же найденным номером; Выделите номер строки (текущий номер строки) }); тело, текстовая область { семейство шрифтов: Consolas, "Courier New", Courier, моноширинный; } .редактор { отображение: линейная сетка; столбцы-шаблона сетки: 3em авто; разрыв: 10 пикселей; высота строки: 21 пиксель; фон: RGB(40 42 58); радиус границы: 2 пикселя; переполнение-у: авто; максимальная высота: 243 пикселей; } .editor>* { отступ сверху: 10 пикселей; отступ снизу: 10 пикселей; } .numbers { выравнивание текста: по правому краю; фон: #333; отступ справа: 5 пикселей; } .numbers интервал { встречный инкремент: номер строки; } .numbers span::before { содержимое: счетчик (номер строки); дисплей: блок; цвет: #888; } текстовая область { высота строки: 21 пиксель; граница: 0; фон: прозрачный; цвет: #fff; минимальная ширина: 500 пикселей; контур: нет; изменение размера: нет; отступ справа: 10 пикселей;