通过data-target点击切换元素显隐触发JS报错如何解决

• 你当前代码中targetElement存储的是data-target属性返回的字符串值（即"navAuth"），并非页面对应的DOM元素对象。
• 原生字符串类型不存在classList属性，直接调用classList.toggle()方法会触发类型错误，导致脚本运行中断。

你需要先通过获取到的id字符串，匹配到页面中真实的DOM节点，再对节点执行类名切换操作。建议增加元素存在性判断，避免data-target配置错误时控制台抛出异常，修复后的完整JS代码如下：

function btnToggleVisibility(obj) {
    // 获取配置的目标容器id
    const targetId = obj.getAttribute('data-target');
    // 查找对应id的DOM元素
    const targetElement = document.getElementById(targetId);
    // 元素存在时才执行显隐切换
    if (targetElement) {
        targetElement.classList.toggle('show');
    }
}

window.btnToggleVisibility = btnToggleVisibility;

修复后该函数完全支持复用：后续新增按钮时，只需要给按钮设置data-target属性为对应容器的id，绑定onclick="btnToggleVisibility(this)"即可，无需修改JS逻辑就能实现多组元素独立显隐控制。

内容的提问来源于stack exchange，提问作者Lourd Nathaniel Gonzalez