JavaScript联系人应用addStar()函数二次添加收藏失效问题

核心问题 #

1. HTML转义字符匹配错误：你通过转义字符串（如<i class="..."></i>）设置star.innerHTML，但浏览器会自动将其解析为实际的HTML标签（如<i class="fa-sharp fa-regular fa-star"></i>）。后续判断时仍用转义字符串对比，自然无法匹配，导致点击事件失效。
2. 冗余变量干扰：starClicked变量在代码中无实际用途，完全可以移除。
3. 状态判断依赖DOM而非数据：依赖innerHTML判断收藏状态容易受渲染细节影响，应该直接基于favArray的实际数据来判断。

修复后的代码 #

// 收藏、编辑、删除功能逻辑
const star = document.querySelector('.star');
// 直接用实际HTML标签设置初始状态，避免转义问题
star.innerHTML = '<i class="fa-sharp fa-regular fa-star"></i>';

function addStar() {
    // 优先基于数据判断是否已收藏（用唯一id匹配，避免对象引用差异导致的判断错误）
    const isFavorited = favArray.some(contact => contact.id === currentContact.id);
    
    if (!isFavorited) {
        // 未收藏则添加
        favArray.push(currentContact);
        star.innerHTML = '<i class="fa-solid fa-star"></i>';
    } else {
        // 已收藏则移除
        const index = favArray.findIndex(contact => contact.id === currentContact.id);
        if (index !== -1) {
            favArray.splice(index, 1);
            star.innerHTML = '<i class="fa-sharp fa-regular fa-star"></i>';
        }
    }
}      
star.addEventListener('click', addStar);

额外说明 #

• 如果你的currentContact没有id属性，建议在添加联系人时为每个联系人生成唯一标识（如Date.now()或UUID），确保some和findIndex能准确匹配对象，避免因对象引用不同导致的判断错误。
• 后续所有状态判断都应优先基于数据层（如favArray、联系人列表数组），而非DOM元素的innerHTML或样式，这样逻辑更稳定，也便于维护。

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