Применить textContent дочерних элементов выбранного родительского элемента к другим элементам ⇐ CSS

[Anonymous]

Я хочу получить textContent диапазонов li > h3 и li > h3 > и применить каждый из них соответственно к значению ввода (id="font-name") и к h4 (id="font-class) "), который является родственным по отношению к входным данным.

Он записывает «неопределенное» во входное значение, но ничего в h4. Кроме того, когда я нажимаю на h3 внутри li (li > h3 ), он вообще не срабатывает…

Документ .typeface-alegreya { цвет фона: светло-коралловый; } .typeface-alegreya-sans { цвет фона: светло-голубой; } .typeface-архив { цвет фона: светло-зеленый; } .typeface-archivo-narrow { цвет фона: светло-желтый; } Шрифт Гаральд с засечками [*] ГамбургевоныАлегреяГуманистическая засечка [*] ГамбургевоныАлегрея SansГуманистический без засечек [*] ГамбургевоныАрхивоГротеск без засечек [*] ГамбургевоныArchivo NarrowГротеск без засечек Плотность фактуры письменной или наборной страницы называется ее цветом. Это не имеет ничего общего с красными или зелеными чернилами; это относится только к темнота или чернота буквенных форм в массе. Как только требования разборчивость и логический порядок соблюдены, ровность цвета является обычная цель типографа.
const fontList = document.querySelectorAll("li"); const fontListFirstChild = document.querySelectorAll("li > h3"); const FontListFirstChildText = FontListFirstChild.textContent; const fontListSecondChild = document.querySelectorAll("li > h3 > span"); const FontListSecondChildText = FontListSecondChild.textContent; const fontApplyMain = document.querySelector("main"); const fontNameUI = document.getElementById("имя-шрифта"); const fontClassUI = document.getElementById("шрифт-класс"); fontList.forEach((li) => { li.addEventListener("клик", (событие) => { fontApplyMain.className = ""; FontApplyMain.classList.add(event.target.className); FontNameUI.value = ""; FontNameUI.value = FontListFirstChildText; FontClassUI.value = ""; FontClassUI.value = FontListSecondChildText; диалоговые шрифты.закрыть(); }); });