問題描述:
頁面有一個複選框(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。