编写JS按钮点击事件时代码运行提示函数未定义报错如何解决？

报错原因 #

• 你的代码存在语法结构不闭合问题：addEventListener绑定的点击事件匿名回调函数只写了左大括号，没有对应的右大括号闭合；同时forEach的回调函数闭合括号被拆分到了代码块外部，JS解析器无法识别完整的函数结构，因此会抛出函数未定义类的报错。
• 原代码结构层级错误梳理：

btns.forEach(function (btn) { // 第一层：forEach回调左括号
    btn.addEventListener("click", function(e){ // 第二层：click回调左括号
        console.log(e.currentTarget);
// 此处缺失click回调的右大括号，仅下方写了addEventListener的右小括号，层级完全错位
});
// 拆分到外部的});本是闭合forEach回调，但前置层级错误导致整体结构失效

修复方案 #

按照嵌套层级补全所有配对的括号即可，正确可运行的代码如下：

const value = document.querySelector("#value");
const btns = document.querySelectorAll(".btn");

btns.forEach(function (btn) {
    btn.addEventListener("click", function(e){
        console.log(e.currentTarget);
    }); // 补全click回调右大括号 + addEventListener右小括号
}); // 闭合forEach回调右大括号 + forEach右小括号

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