新手网页开发遇点击功能问题：点击Li元素无法在页面输出内容

架构老林

2026-6-25

问题分析与解决方案

你的核心问题出在事件绑定逻辑错误，导致点击事件根本没有绑定到目标li元素上，同时点击事件处理函数也未正确获取点击内容。以下是具体修复步骤：

1. 修复事件绑定代码

原代码中forEach的箭头函数未接收当前遍历的li元素，且addEventListener未指定绑定对象（默认绑定到window），因此点击li不会触发事件。修正后的代码：

let selector = document.querySelectorAll('.content .options li');
let writer = document.querySelector('.content .result');

selector.forEach(item => {
    // 将点击事件绑定到每个li元素上
    item.addEventListener('click', clickHandler);
});

function clickHandler(){
    // 用this获取当前点击的li元素，输出其文本内容
    writer.innerHTML = this.textContent.trim();
}

2. 确保JS在DOM加载完成后执行

如果你的JS代码放在<head>标签内，会在DOM元素未加载完成时执行，导致querySelector无法找到目标元素。解决办法二选一：

将JS代码移到<body>标签的末尾（紧接</body>之前）
用DOMContentLoaded事件包裹代码：

document.addEventListener('DOMContentLoaded', function() {
    let selector = document.querySelectorAll('.content .options li');
    let writer = document.querySelector('.content .result');

    selector.forEach(item => {
        item.addEventListener('click', clickHandler);
    });

    function clickHandler(){
        writer.innerHTML = this.textContent.trim();
    }
});