Javascript方法总是不调用，只要打开了F12 Developer Tool方法就能执行

问题描述：

页面有一个复选框（checkbox），点击该复选框时，这个表格中的所有复选框都选中，取消选中时，所有的都取消选中。

但是当打开浏览器的开发者工具（Developer Tool）之前，这个方法无论如何都不会执行，而且控制台也没有任何错误信息。

博主找遍了国内外各大论坛都无果，大多数找到的问题根源都是在JavaScript function中使用了console方法，因为console对象只有在开发者模式下才会被创建。但是这个案例中没有任何代码直接或者间接的调用到了console。

直到看到 chunlynn 博主的博客

JS异常处理：Uncaught TypeError: xxx is not a function at HTMLAnchorElement.onclick

问题分析：

函数名不能和页面的某个标签的id名相同。一些浏览器可以通过在js代码中指定ID访问节点元素，然后定义的函数就会被DOM中的元素覆盖了。如果出现这种情况，就需要重命名函数名称或元素ID。

 

看到这里，好像前端代码中确实有一个元素的id和这个js方法名字一样。

果不其然，贴上代码：

前端元素代码：

<input type="checkbox" name="checkAll" onclick="checkAll(form)"/>

js 代码： 

function checkAll(form){
	var d=document.getElementsByTagName("input");
	for (i=0;i<d.length;i++){
		if (d[i].type == 'checkbox'){
			if (d[i].name != 'name'){
				d[i].checked = form.checkBox.checked;
			}
		}
	}

修改id或者方法的名字，保证2者不同，fix。

 

总结：

函数名不能和页面的某个标签的id名相同。一些浏览器可以通过在js代码中指定ID访问节点元素，然后定义的函数就会被DOM中的元素覆盖了。如果出现这种情况，就需要重命名函数名称或元素ID。