如何用JavaScript检测多个指定ID元素的点击事件？

我想用JavaScript检测网页上多个特定ID元素的点击行为，触发时执行对应代码。用document.querySelector处理单个ID元素时代码正常，但用document.querySelectorAll处理多个ID时失效。尝试了相关方案但没成功，出现错误：

Uncaught ReferenceError: Invalid left-hand side in assignment

我的代码如下：

document.addEventListener('DOMContentLoaded', function(){
    Array.from(document.querySelectorAll("#id_types, #id_cons_1")).forEach(button=>button.click()) = function() { 
        document.querySelector("#id_new_name").value= some_value_to_be_assigned
    }})

请问我哪里出错了？

你的核心问题是事件绑定的语法完全写错了：button.click()是直接触发元素点击的方法，不是用来绑定点击事件的属性。要给元素绑定点击事件，得用正确的事件绑定方式，以下是两种修正方案：

方案1：使用addEventListener（推荐） #

这种方式支持给同一个元素绑定多个同类型事件，不会覆盖已有事件：

document.addEventListener('DOMContentLoaded', function(){
    // 获取目标元素集合并遍历
    [...document.querySelectorAll("#id_types, #id_cons_1")].forEach(button => {
        // 给每个元素绑定click事件
        button.addEventListener('click', function() {
            // 替换成你实际要赋值的内容，字符串记得加引号
            document.querySelector("#id_new_name").value = '目标赋值内容';
        });
    });
});

方案2：使用onclick属性 #

这种方式只能给元素绑定一个click事件，新的事件会覆盖旧的：

document.addEventListener('DOMContentLoaded', function(){
    Array.from(document.querySelectorAll("#id_types, #id_cons_1")).forEach(button => {
        button.onclick = function() {
            document.querySelector("#id_new_name").value = '目标赋值内容';
        };
    });
});

额外注意点：

• some_value_to_be_assigned如果是字符串必须加引号，否则会被当作未定义的变量，引发新的错误
• Array.from()可以替换成扩展运算符[...]，两者都能把querySelectorAll返回的类数组转成真正的数组
• 代码已经用DOMContentLoaded包裹，确保DOM加载完成后再操作元素，这部分是正确的

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