Chrome提示Uncaught TypeError: specification_existing不是函数的问题求助

嘿，我来帮你捋捋这个问题～你遇到的Uncaught TypeError: specification_existing is not a function错误，核心原因是浏览器触发点击事件时找不到这个函数的定义，但specification_none能正常运行，说明大部分环境是没问题的，下面是几个最可能的诱因和解决办法：

1. 函数被“关”在局部作用域里了 #

如果你的specification_existing函数是写在$(document).ready()的回调函数内部，那它属于局部函数，HTML里的点击事件属于全局环境，根本访问不到它。而specification_none大概率是定义在全局作用域里的，所以能正常调用。

举个错误的例子：

$( document ).ready(function() {
  // 这个函数是局部的，外部碰不到
  function specification_existing() {
    // 你的逻辑代码
  }

  // 这个挂载到了全局，所以能被HTML调用
  window.specification_none = function() {
    // 函数逻辑
  }
});

解决办法很简单，把specification_existing暴露到全局：

$( document ).ready(function() {
  function specification_existing() {
    // 你的逻辑代码
  }
  // 把函数挂载到window上，让全局能访问
  window.specification_existing = specification_existing;
});

2. 函数名拼写/大小写出错了 #

别笑，这种小失误真的很常见！仔细核对HTML里绑定的函数名（比如onclick="specification_existing()"）和JS里定义的函数名，是不是完全一致？比如有没有写成specification_exist少了个ing，或者大小写错了（比如Specification_existing）？

3. 同名变量把函数覆盖了 #

如果你的代码里有个和specification_existing同名的变量，在函数定义之后被赋值成了非函数类型，那函数就被“挤掉”了。比如：

function specification_existing() {
  // 逻辑代码
}

// 后面不小心把这个名字赋值成了字符串/数字
var specification_existing = "测试文本";

这种情况下，点击事件触发时，specification_existing已经不是函数了，自然会抛出类型错误。

4. 更规范的解决方案：动态绑定事件 #

其实我更推荐你不用全局函数，而是用jQuery的动态事件绑定，这样既能避免作用域问题，也更符合现代前端写法。比如：

$( document ).ready(function() {
  // 给单选框动态绑定点击事件
  $('#radio_specification_existing').on('click', function() {
    // 这里写原来specification_existing函数里的逻辑
    // 比如显示/隐藏对应盒子之类的
  });

  $('#radio_specification_none').on('click', function() {
    $("#specification_existing_box").hide();
    $("#specification_new_box").hide();
  });

  // 初始化逻辑不变
  if ($('#radio_specification_none').attr("checked")){
    $("#specification_existing_box").hide();
    $("#specification_new_box").hide();
  }
});

这样你就不用在HTML里写onclick属性了，所有逻辑都在JS里维护，还能避免全局作用域污染。

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