论坛开发问题：点击按钮无法显示对应回复ID

你遇到的问题主要有两个核心原因：

1. 重复的ID属性：在foreach循环里，你给每个隐藏输入框都设置了相同的id="abcId"，但HTML规范要求页面上的ID必须是唯一的。当你调用document.getElementById("abcId")时，它只会返回页面上第一个匹配这个ID的元素，所以不管点哪个按钮，拿到的都是第一个回复的ID。

2. 重复定义函数：你把printIt()函数写在了循环内部，这意味着每次循环都会重新定义这个函数，后面的定义会直接覆盖前面的。最终所有按钮调用的都是最后一次循环定义的函数，自然只会弹出最后一个ID。

下面给你几个可行的解决方案，你可以根据自己的需求选择：

方案一：直接在点击事件中传递ID #

最简单的实现方式，不需要依赖ID，直接把回复ID作为参数传给点击事件：

$reacttie = $app->get_reactie($actieftopicid); 
foreach ($reacttie as $reactie) { 
    echo ' 
    <div class="timeline-footer"> 
        <form name="formName"> 
            <input type="hidden" name="abcName" value="'.$reactie['id'] .'"/> 
            <input class="btn btn-primary btn-xs" type="button" value="Reageer" onclick="printIt('.$reactie['id'].')" /> 
        </form> 
    </div>'; 
}

然后把函数放在循环外面（比如页面的<head>标签里或者页面底部）：

function printIt(id){
    alert(id);
}

方案二：通过当前表单获取对应值 #

利用this关键字获取当前点击的按钮，再找到它所在的表单，进而拿到隐藏输入框的值，完全不需要ID：

$reacttie = $app->get_reactie($actieftopicid); 
foreach ($reacttie as $reactie) { 
    echo ' 
    <div class="timeline-footer"> 
        <form name="formName"> 
            <input type="hidden" name="abcName" value="'.$reactie['id'] .'"/> 
            <input class="btn btn-primary btn-xs" type="button" value="Reageer" onclick="printIt(this)" /> 
        </form> 
    </div>'; 
}

对应的JS函数：

function printIt(button){
    // 通过按钮找到它所在的表单，再获取隐藏输入框的值
    const id = button.form.querySelector('input[name="abcName"]').value;
    alert(id);
}

方案三：使用事件委托（更优雅的方式） #

如果页面上回复数量较多，或者后续会动态添加回复，推荐用事件委托——只需要给父元素绑定一次事件，就能处理所有按钮的点击：

首先修改HTML生成部分，去掉内联的onclick，给按钮加个统一的类名：

$reacttie = $app->get_reactie($actieftopicid); 
foreach ($reacttie as $reactie) { 
    echo ' 
    <div class="timeline-footer"> 
        <form name="formName"> 
            <input type="hidden" name="abcName" value="'.$reactie['id'] .'"/> 
            <input class="btn btn-primary btn-xs reply-btn" type="button" value="Reageer" /> 
        </form> 
    </div>'; 
}

然后在页面底部添加JS：

// 给整个文档绑定点击事件，通过事件冒泡判断目标元素
document.addEventListener('click', function(e) {
    // 判断点击的是不是回复按钮
    if(e.target.classList.contains('reply-btn')){
        const id = e.target.form.querySelector('input[name="abcName"]').value;
        alert(id);
    }
});

这种方式不仅代码更简洁，还能兼容后续动态新增的回复按钮，扩展性更好。

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