JSLint提示‘Expected ':' and instead saw '='’，如何修复回到顶部按钮代码？

嘿，这个JSLint警告很常见，问题出在你把赋值语句直接放进了三元运算符的分支里啦。JSLint对语法风格要求比较严格，它期望三元运算符是用来返回一个值，而不是在分支里执行赋值操作。

修复后的完整代码 #

var topBtn = document.createElement("button");
topBtn.innerHTML = "Top";
var topBtnWrapper = document.getElementById("topBtnWrap");
topBtnWrapper.appendChild(topBtn);

// 修复后的滚动事件处理逻辑
window.onscroll = function() {
  // 把三元表达式的结果赋值给display属性，而非在分支内做赋值
  topBtn.style.display = (document.body.scrollTop > 500 || document.documentElement.scrollTop > 500) 
    ? 'block' 
    : 'none';
};

// 补充：给按钮添加回到顶部的点击事件（如果还没实现的话）
topBtn.addEventListener('click', function() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth' // 可选，开启平滑滚动效果
  });
});

为什么这样修复？ #

原来的写法是将topBtn.style.display = 'block'这类赋值操作作为三元运算符的分支内容，JSLint会判定这不符合规范——它要求三元运算符是一个用于计算值的表达式，而非执行语句。

重构后，我们用三元表达式判断滚动位置，直接返回'block'或'none'，再把这个结果赋值给topBtn.style.display，既完全符合JSLint的语法要求，又和原代码的功能保持一致。

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