制作JavaScript测验时点击Next按钮出现Reference error: can't find var cb求助

问题原因 #

你把cb函数定义在ab函数内部的switch分支里，这属于函数作用域内的局部函数。而HTML里的onclick="cb()"是在全局作用域下调用的，全局环境找不到这个函数，所以触发ReferenceError: can't find var cb。

解决方案 #

方案1：把cb移到全局作用域

直接将cb函数定义在ab外面，让全局环境能访问到：

// 全局定义cb函数
function cb() {
  document.getElementById("b").style.display = "block";
  document.getElementById("an").style.display = "none";
}

function ab() {
  var text;
  var quiza = prompt("is it gif or jif");
  switch(quiza) {
    case "gif":
      text = "Good";
      document.getElementById("a").style.display = "none";
      document.getElementById("an").style.display = "block";
      document.getElementById("counter").innerHTML = "1/10";
      break;
    case "jif":
      text = "No";
      break;
    default:
      text = "wrong that's not gif or jif";
  }
  document.getElementById("res").innerHTML = text;
}

方案2：用事件监听替代内联onclick（推荐）

移除HTML里的内联onclick，改用JS动态绑定事件，这样不用暴露全局函数，代码更干净：
修改后的HTML：

<div class="buttona" id="a"><button onclick="ab()">CLICK ME FOR 1st Q</button></div>
<div class="next" id="an"><button>Next</button></div>

修改后的JS：

function ab() {
  var text;
  var quiza = prompt("is it gif or jif");
  switch(quiza) {
    case "gif":
      text = "Good";
      document.getElementById("a").style.display = "none";
      const nextBtnContainer = document.getElementById("an");
      nextBtnContainer.style.display = "block";
      
      // 给Next按钮绑定点击事件
      nextBtnContainer.querySelector("button").addEventListener("click", function() {
        document.getElementById("b").style.display = "block";
        nextBtnContainer.style.display = "none";
      });
      
      document.getElementById("counter").innerHTML = "1/10";
      break;
    case "jif":
      text = "No";
      break;
    default:
      text = "wrong that's not gif or jif";
  }
  document.getElementById("res").innerHTML = text;
}

方案3：将cb挂载到window对象（不推荐，会污染全局）

如果非要保留内联onclick，可以把cb挂到window上，让全局能访问：

function ab() {
  var text;
  var quiza = prompt("is it gif or jif");
  switch(quiza) {
    case "gif":
      text = "Good";
      document.getElementById("a").style.display = "none";
      document.getElementById("an").style.display = "block";
      
      // 挂载到window，全局可访问
      window.cb = function() {
        document.getElementById("b").style.display = "block";
        document.getElementById("an").style.display = "none";
      }
      
      document.getElementById("counter").innerHTML = "1/10";
      break;
    case "jif":
      text = "No";
      break;
    default:
      text = "wrong that's not gif or jif";
  }
  document.getElementById("res").innerHTML = text;
}

推荐选择 #

优先用方案2，既避免了全局变量污染，也让事件绑定逻辑和UI操作更耦合，维护起来更方便。

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