JavaScript点击事件内调用预定义函数失效问题求助

我是JavaScript新手，遇到一个问题：初始调用goTo("dashboard")正常，.navbr元素的点击事件里调用goTo(evt.target.id)也正常，但#accountsBtn的点击事件里调用goTo("accounts")完全没反应，哪怕alert能正常触发。

相关代码：

const optionsList = ["dashboard", "accounts", "expenses", "income", "budgets", "reports"];

function goTo(classname){
  optionsList.forEach(function(item){
    if(classname === item){
        $("." + item).css("display", "block");
        $("#" + item).addClass("active");
      } else{
        $("." + item).css("display", "none");
        $("#" + item).removeClass("active");
      }
  });
}

goTo("dashboard");

$(".navbr").click(function(evt){
  goTo(evt.target.id);    // 这个调用正常工作
});

$("#accountsBtn").click(function(){
  goTo("accounts");   // 这个调用无响应
});

补充测试代码：

$("#accountsBtn").click(function(){
  alert("I got clicked");  // 这行能正常触发
  goTo("accounts");   // 这个调用还是无响应
});

排查方向及解决方法 #

• 事件冒泡冲突：如果#accountsBtn嵌套在.navbr元素内部，点击按钮时会先触发自身的click事件调用goTo("accounts")，随后事件冒泡到.navbr的click事件，此时evt.target.id可能是accountsBtn（而非accounts），导致.navbr的事件又调用了一次goTo，覆盖了之前的操作。
  解决方法：在按钮的点击事件中阻止冒泡：

  $("#accountsBtn").click(function(evt){
    alert("I got clicked");
    evt.stopPropagation(); // 阻止事件向上冒泡
    goTo("accounts");
  });
  

• DOM元素匹配问题：检查页面中是否存在.accounts类的元素和#accounts的元素。goTo函数依赖这两个选择器切换显示状态和激活样式，如果元素不存在，函数执行了也看不到效果。
• 函数/变量命名冲突：在goTo函数开头添加console.log(classname)，确认调用时是否输出accounts，以此判断函数是否真的被执行。如果没有输出，可能存在同名函数覆盖的情况，需要检查全局作用域内的命名。

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