点击li元素时子元素文本赋值失效及h3无响应问题求助

核心问题拆解 #

1. 数据获取错误：
   • querySelectorAll返回NodeList集合，直接取textContent会得到undefined，必须针对当前点击的<li>获取内部元素
   • 原HTML中<span>是<li>的直接子元素，不是<h3>的子元素，选择器写错
2. 元素属性误用：<h4>是普通文本元素，没有value属性，需用textContent修改内容
3. 事件目标混乱：点击<li>内部子元素时，event.target指向子元素，导致类名获取错误，应直接从绑定的<li>元素获取信息

修复后的完整代码 #

HTML部分（仅修正结构逻辑，其余保留） #

<!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;
        }
        .hide { display: none; }
    </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>

    <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", () => {
                // 获取当前点击li内部的目标元素文本
                const h3Text = li.querySelector("h3").textContent;
                const spanText = li.querySelector("span").textContent;
                
                // 更新main的类名
                fontApplyMain.className = "";
                fontApplyMain.classList.add(li.className);
                
                // 更新输入框和h4内容
                fontNameUI.value = h3Text;
                fontClassUI.textContent = spanText;
                
                // 若dialogFonts为已定义的对话框元素，可保留此行
                // dialogFonts.close();
            });
        });
    </script>
</body>
</html>

关键修改说明 #

• 移除全局集合变量：不再提前获取所有h3/span，而是在点击事件中通过当前<li>的querySelector获取对应元素的文本，确保数据是当前点击项的内容
• 修正选择器：将错误的li > h3 > span改为li span，匹配HTML实际结构
• 修改h4内容的方式：用textContent替代value，因为h4不是表单控件
• 稳定获取类名：直接使用li.className而非event.target.className，避免点击子元素时获取错误的类名
• 精简冗余代码：删除了清空值的无效操作，直接赋值即可覆盖原有内容

内容的提问来源于stack exchange，提问作者designtools