JavaScript点赞点踩点击计数器onClick事件失效求助

看起来你的计数器没法正常运行，核心问题是逻辑不完整以及缺少页面计数更新的环节，咱们一步步来把它修好用：

1. 先完善HTML结构（添加计数显示容器） #

原来的HTML没有展示点赞/点踩数字的地方，咱们给每个按钮旁边加个<span>用来实时显示计数：

<img id='like1' src='./imoticon/good.png' style='width:23px;height:23px;' title='좋아요' value='1' onclick='onClick(this.value, this.id)'>
<span id="likeCount1">0</span> 좋아요 

<img id='hate1' src='./imoticon/bad.png' style='width:23px;height:23px;' onclick='onClick(this.value, this.id)' value='-1' title='싫어요'>
<span id="hateCount1">0</span> 싫어요

这里给onClick多传了this.id参数，方便咱们区分是点赞还是点踩按钮，后续逻辑处理更清晰。

2. 补全JavaScript逻辑 #

你的原始JS只初始化了计数变量，但没有处理点击后的计数更新和页面渲染，另外还得考虑防止重复点击（比如用户多次点同一个按钮，不该重复累加）。下面是完整可运行的JS代码：

// 初始化计数，同时记录用户是否已点击过对应按钮
let likeClicks = 0;
let hateClicks = 0;
let hasLiked = false;
let hasHated = false;

function onClick(value, elementId) {
    const val = parseInt(value);
    const likeCountEl = document.getElementById('likeCount1');
    const hateCountEl = document.getElementById('hateCount1');

    // 处理点赞逻辑
    if (val === 1) {
        if (!hasLiked) {
            likeClicks++;
            // 如果之前点过踩，同步取消踩的计数
            if (hasHated) {
                hateClicks--;
                hasHated = false;
                hateCountEl.textContent = hateClicks;
            }
            hasLiked = true;
            likeCountEl.textContent = likeClicks;
        } else {
            // 支持取消点赞
            likeClicks--;
            hasLiked = false;
            likeCountEl.textContent = likeClicks;
        }
    } 
    // 处理点踩逻辑
    else if (val === -1) {
        if (!hasHated) {
            hateClicks++;
            // 如果之前点过赞，同步取消赞的计数
            if (hasLiked) {
                likeClicks--;
                hasLiked = false;
                likeCountEl.textContent = likeClicks;
            }
            hasHated = true;
            hateCountEl.textContent = hateClicks;
        } else {
            // 支持取消点踩
            hateClicks--;
            hasHated = false;
            hateCountEl.textContent = hateClicks;
        }
    }
}

3. 关键修复点说明 #

• 添加计数显示容器：必须有DOM元素承载计数数值，否则用户看不到任何变化
• 区分按钮类型：通过传递按钮ID或判断value，明确当前操作是点赞还是点踩
• 防止重复点击：用hasLiked/hasHated记录用户点击状态，避免重复累加；同时支持取消点赞/点踩的交互
• 实时更新页面：每次计数变化后，把新数值赋值给对应<span>的textContent，确保页面同步显示最新计数

如果你的需求不需要"取消点赞/点踩"功能，只保留单次点击生效的逻辑，可以直接去掉代码里的取消分支即可。

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