JavaScript点击事件异常：无法为最后子元素添加.clicked类及获取innerText

你的代码核心问题出在getCountryByDiv函数的循环逻辑上，导致点击最后一个元素时，其.clicked类会被意外移除，进而无法获取到h6标签内容。

问题代码的逻辑缺陷 #

在循环遍历子元素时，原逻辑存在严重冲突：

• 若当前遍历的元素有.clicked类，就移除它
• 否则，给点击的元素添加.clicked类

当点击最后一个元素时，循环到该元素本身时，它已经被前面的循环步骤加上了.clicked类，于是进入if分支将其移除，最终该元素没有.clicked类，后续用document.querySelector(".clicked .card-title")自然找不到目标元素，访问innerText就会报错。

修复后的代码 #

function getCountryByDiv(selectedCountry) {
    // 获取邻居容器的所有子元素
    const neighborItems = document.getElementById("neighbors").children;
    
    // 先移除所有子元素的.clicked类，确保只有当前点击的元素有这个类
    for (let item of neighborItems) {
        item.classList.remove("clicked");
    }
    
    // 给当前点击的元素添加.clicked类
    selectedCountry.classList.add("clicked");
    
    // 直接从当前点击的元素内部查找h6标签，无需依赖全局选择器
    const htag = selectedCountry.querySelector(".card-title");
    console.log(htag);
    getCountry(htag.innerText);
}

function renderNeighbors(data) {
    console.log(data);
    let html = "";

    for (let country of data) {
        html += `
        <div onclick="getCountryByDiv(this)" class="col-2 mt-2">
            <div class="card clickable">
                <img src="${country.flags.png}" class="card-img-top">
                <div class="card-body">
                    <h6 class="card-title">${country.name.common}</h6>
                </div>
            </div>
        </div>
        `;
    }
    document.querySelector("#neighbors").innerHTML = html;
}

关键优化点 #

1. 重构循环逻辑：先统一移除所有子元素的.clicked类，再单独给当前点击的元素添加，彻底避免循环中的逻辑冲突
2. 精准获取元素：直接从点击的元素内部查找h6标签，比全局选择器更可靠，也避免了类选择器可能带来的歧义
3. 变量声明规范：给所有变量添加const/let声明，避免全局变量污染

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