JS DOM实现点击计数按钮逐行显示计数恒为0问题求解

闭包初始化位置错误。你把计数闭包的立即执行函数（IIFE）写在了add_count函数内部，每次点击按钮触发add_count时，都会重新执行一次IIFE，生成一个初始值恒为0的全新counter变量，每次调用返回的自然都是0，完全没用到闭包持久保存变量的特性。
另外原代码用了后置自增counter++，就算闭包位置对，第一次点击显示的也是0，不符合从1开始计数的需求。

<form action="#">
    <input type="button" value="Count" onclick="add_count()">
</form>

<script>
// 计数器仅在页面加载时初始化一次，counter变量被闭包持久持有
const getCount = (function () {
    let counter = 0;
    return function() {
        return ++counter;
    };
}());

function add_count() {
    const pTag = document.createElement("p");
    pTag.appendChild(document.createTextNode(getCount()));
    document.body.appendChild(pTag);
}
</script>

• 将计数闭包的初始化逻辑移到add_count函数外部，保证整个页面生命周期里计数器只初始化一次，每次点击都是操作同一个被闭包保存的counter变量，不会重复重置
• 将后置自增counter++改为前置自增++counter：后置自增会先返回变量当前值再执行自增，第一次调用返回0；前置自增先完成自增再返回值，第一次点击就返回1，符合从1开始递增的需求
• 直接使用document.body获取body节点，比document.getElementsByTagName("body")[0]写法更简洁，效果完全一致

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