JS代码在自有页面正常运行却在JSFiddle失效，原因何在？

这个问题我碰到过好几次啦！核心原因是你依赖了浏览器的一个非标准特性，而JSFiddle的环境刚好禁用了它。

你代码里直接用了reg变量，在自己的网站上能正常工作，大概率是因为你的DOM里有个id为reg的元素——浏览器有个老特性：会自动把带id的DOM元素挂载到全局window对象上，所以你不用手动获取就能直接用reg。但JSFiddle的环境（即使是「no wrap - in body」模式）会默认启用严格模式，或者限制了这个自动映射的特性，导致reg变成了未定义的变量，自然调用classList.toggle就报错了。

解决步骤很简单： #

• 先主动获取DOM元素，不要依赖浏览器的自动映射：

  // 先获取目标元素
  const reg = document.getElementById('reg');
  function details(){ 
    reg.classList.toggle("reg"); 
  }
  

• 另外推荐用更可靠的事件绑定方式替代onclick属性，避免全局函数的问题：

  const reg = document.getElementById('reg');
  // 替换成你的按钮实际id
  const toggleButton = document.getElementById('toggle-btn');
  
  toggleButton.addEventListener('click', () => {
    reg.classList.toggle("reg");
  });
  

这样修改后，不管是在自己的网站还是JSFiddle里，代码都能正常工作啦！

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