Apply textContent of child elements of clicked parent element to other elements

I want to grab the textContent of the li > h3 and li > h3 > span and apply each, respectively, to an input's (id="font-name") value and to an h4 (id="font-class") which is a sibling of the input.

It writes 'undefined' to the input value but nothing to the h4. Also, when I click on the h3 inside the li (li > h3 ) it doesn't fire at all…

<body>
    <!doctype html>
    <html lang="en">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            .typeface-alegreya {
                background-color: lightcoral;
            }

            .typeface-alegreya-sans {
                background-color: lightblue;
            }

            .typeface-archivo {
                background-color: lightgreen;
            }

            .typeface-archivo-narrow {
                background-color: lightyellow;
            }
        </style>
    </head>

    <body>
        <nav class="rhythm-m margin-block-start:m">
            <section class="cluster">
                <article class="cluster justify-content:flex-start">

                    <label id="dialog-fonts-open" class="rhythm-xs">
                        <h2>Typeface</h2>
                        <input id="font-name" value="Cormorant Garamond" class="info width:16ch icon-app-window" type="text">
                        <h4 id="font-class">Garalde serif</h4>
                    </label>

                </article>
            </section>
        </nav>

        <ul>
            <li class="typeface-alegreya">
                Hamburgevons<h3>Alegreya</h3><span class="hide">Humanist serif</span>
            </li>
            <li class="typeface-alegreya-sans">
                Hamburgevons<h3>Alegreya Sans</h3><span class="hide">Humanist sans serif</span>
            </li>
            <li class="typeface-archivo">
                Hamburgevons<h3>Archivo</h3><span class="hide">Grotesque sans serif</span>
            </li>
            <li class="typeface-archivo-narrow">
                Hamburgevons<h3>Archivo Narrow</h3><span class="hide">Grotesque sans serif</span>
            </li>
        </ul>
        <main class="typeface-cormorant-garamond">
            <p>
                The density of texture in a written or typeset page is called its color.
                This has nothing to do with red or green ink; it refers only to the
                darkness or blackness of the letterforms in mass. Once the demands of
                legibilty and logical order are satisfied, eveness of color is the
                typographer's normal aim.
            </p>
        </main>
    </body>

    </html>
    <script type="text/javascript">

        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("font-name");
        const fontClassUI = document.getElementById("font-class");

        fontList.forEach((li) => {
            li.addEventListener("click", (event) => {
                fontApplyMain.className = "";
                fontApplyMain.classList.add(event.target.className);
                fontNameUI.value = "";
                fontNameUI.value = fontListFirstChildText;
                fontClassUI.value = "";
                fontClassUI.value = fontListSecondChildText;
                dialogFonts.close();
            });
        });
    </script>
</body>

</html>

Solution

Try this:

<script type="text/javascript">
    const fontList = document.querySelectorAll("li");

    const fontApplyMain = document.querySelector("main");
    const fontNameUI = document.getElementById("font-name");
    const fontClassUI = document.getElementById("font-class");

    fontList.forEach((li) => {
        li.addEventListener("click", (event) => {
            const clickedH3 = event.currentTarget.querySelector("h3");
            const clickedSpan = event.currentTarget.querySelector("h3 > span");

            fontApplyMain.className = "";
            fontApplyMain.classList.add(event.currentTarget.className);
            
            fontNameUI.value = clickedH3.textContent;
            fontClassUI.textContent = clickedSpan.textContent;

            // Assuming you want to set textContent for h4, not value
            dialogFonts.close();
        });
    });
</script>