QUnit测试异常：滚动按钮显示用例（测试3）未通过，求排查原因

嘿，我一眼就瞅到了问题所在——变量名大小写不匹配！这是个很容易疏忽的小错误，但直接导致了滚动显示按钮的逻辑失效。

错误根源 #

你在代码开头获取DOM元素时，把按钮赋值给了变量mybutton：

var mybutton = document.getElementById("myBtn");

但在scrollFunction函数里，你却用了myBtn来修改样式：

myBtn.style.display = "block";
// 以及下方的 myBtn.style.display = "none";

JavaScript是大小写敏感的语言，这两个变量名（mybutton vs myBtn）被视为完全不同的变量，函数里根本找不到正确的DOM元素，自然没法在滚动时把按钮设为显示状态，测试用例3也就失败了。

修正后的JavaScript代码 #

把变量名统一即可，推荐和元素ID保持一致用myBtn，更直观：

var myBtn = document.getElementById("myBtn");
// As soon as user scrolls down 20px show the scroll up button
window.onscroll = function() {scrollFunction()};
function scrollFunction() {
  if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
    myBtn.style.display = "block";
  } else {
    myBtn.style.display = "none";
  }
}

测试验证 #

修正变量名后再运行你的QUnit测试：

• 测试用例3：设置scrollTop为22时，scrollFunction会正确识别滚动距离，把按钮display设为block，断言顺利通过。
• 测试用例4：原有逻辑不受影响，依然会正确隐藏按钮，断言继续生效。

额外提个小细节：在部分测试环境中可能需要手动触发scroll事件来触发函数，但你这里已经直接调用了scrollFunction()，所以修正变量名后就完全没问题啦。

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