js?Cannot?set?properties?of?null(setting?‘onclick‘)問(wèn)題分析
個(gè)人學(xué)習(xí)過(guò)程中遇到“Uncaught TypeError: Cannot set properties of null (setting ‘onclick’)”問(wèn)題，分享下
未捕獲的類(lèi)型錯(cuò)誤： 無(wú)法設(shè)置屬性意思就是，無(wú)法獲取到dom節(jié)點(diǎn)，從而導(dǎo)致無(wú)法對(duì)dom節(jié)點(diǎn)進(jìn)行相關(guān)的操作，即無(wú)法設(shè)置相關(guān)dom節(jié)點(diǎn)的屬性。
我下面用代碼示例一下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript之鼠標(biāo)事件之按鈕控制改變div盒子的背景顏色</title>
<style>
div{
width: 200px;
height: 200px;
border: 1px red solid;
background-color: red;
}
</style>
<script>
var b=document.getElementById("an");
b.onclick=function(){
b.style.background="#ffefa1";
};
</script>
</head>
<body>
<div id="an">可以試一下</div>
</body>
</html>報(bào)錯(cuò)原因
這個(gè)代碼你讀一下，好像可以實(shí)現(xiàn)我們想要的效果，實(shí)現(xiàn)點(diǎn)擊相關(guān)的div盒子實(shí)現(xiàn)其背景顏色變顏色的效果，但是一運(yùn)行下來(lái)，在調(diào)試控制臺(tái)里就會(huì)出現(xiàn)Uncaught TypeError TypeError: Cannot set properties of null (setting 'onclick')這樣的報(bào)錯(cuò)------未捕獲的類(lèi)型錯(cuò)誤： 無(wú)法設(shè)置屬性
意思就是，無(wú)法獲取到dom節(jié)點(diǎn)，從而導(dǎo)致無(wú)法對(duì)dom節(jié)點(diǎn)進(jìn)行相關(guān)的操作，即無(wú)法設(shè)置相關(guān)dom節(jié)點(diǎn)的屬性。
那又為什么不能獲取dom節(jié)點(diǎn)呢？我不是寫(xiě)了 這個(gè)獲取相關(guān)標(biāo)簽dom節(jié)點(diǎn)的js代碼嗎？
var b=document.getElementById("an");這就跟我們?cè)趺丛?HTML 中引入 JavaScript有關(guān)了，
那么我們?cè)趺丛?HTML 中引入 JavaScript 呢？
引入方式與 CSS 相似，有以下三種方式：
- 在 HTML 標(biāo)簽中直接引入，針對(duì)一些特別簡(jiǎn)短的 JavaScript 代碼。
- 使用 script 標(biāo)簽可以將 JavaScript 代碼嵌入到 HTML 文檔的 head 和 body 里。
- 使用外部 JavaScript 文件，將 JavaScript 腳本代碼寫(xiě)入一個(gè)后綴為 .js 的文件中，通過(guò)給 script 標(biāo)簽設(shè)置 src 屬性的方式，引入這個(gè)文件。
我們這個(gè)例子的代碼是在head標(biāo)簽里面引入 JavaScript 代碼，html中的代碼是編譯一行就執(zhí)行一行，我們已經(jīng)在前面把 JavaScript這個(gè)代碼已經(jīng)使用完了，到后面執(zhí)行html代碼后，就沒(méi)有這個(gè)javascipt代碼了，所以就沒(méi)有實(shí)現(xiàn)那個(gè)我們想要的javascipt代碼的效果，。
解決辦法:
思路一，既然是因?yàn)閎ody標(biāo)簽后面沒(méi)有javascipt代碼，才導(dǎo)致的執(zhí)行相關(guān)的操作，那就把相應(yīng)的javascipt代碼放在body標(biāo)簽后面就行了,例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript之鼠標(biāo)事件之按鈕控制改變div盒子的背景顏色</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px red solid;
background-color: red;
}
</style>
</head>
<body>
<div id="an">可以試一下</div>
</body>
<script>
var b = document.getElementById("an");
b.onclick = function () {
b.style.background = "#ffefa1";
};
</script>
</html>思路二，我們可以使用window.onload() 這個(gè)方法，
window.onload() 方法用于在網(wǎng)頁(yè)加載完畢后立刻執(zhí)行的操作，即當(dāng) HTML 文檔加載完畢后，立刻執(zhí)行某個(gè)方法。
window.onload() 通常用于 <body> 元素，在頁(yè)面完全載入后(包括圖片、css文件等等)執(zhí)行腳本代碼。
使用window.onload()這個(gè)方法，就不用考慮javascript代碼的位置了，因?yàn)槭褂脀indow.onload()，只要網(wǎng)頁(yè)加載完，就會(huì)觸發(fā)相應(yīng)的效果，例如，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript之鼠標(biāo)事件之按鈕控制改變div盒子的背景顏色</title>
<style>
div{
width: 200px;
height: 200px;
border: 1px red solid;
background-color: red;
}
</style>
<script>
window.onload=function(){
var b=document.getElementById("an");
b.onclick=function(){
b.style.background="#ffefa1";
};};
</script>
</head>
<body>
<div id="an">可以試一下</div>
<button >點(diǎn)擊</button>
</body>
</html>一般就是因?yàn)楂@取不到對(duì)象
1、對(duì)象名不正確 例如 id、class獲取不正確
2、對(duì)象不存在，檢查拼寫(xiě)錯(cuò)誤
3、是不是js代碼應(yīng)該寫(xiě)到最后
html代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WEB API學(xué)習(xí)</title>
</head>
<body>
<button id="btn">母校</button>
<script>
var btn = document.getElementById(" btn ");
btn.onclick =function(){
alert('xtu');
}
</script>
</body>
</html>運(yùn)行結(jié)果：
問(wèn)題原因：getElementById方法無(wú)法找到所寫(xiě)的id名（空格也被認(rèn)為是id名的一部分了）
修改前代碼：
var btn = document.getElementById(" btn ");修改后：
var btn = document.getElementById("btn");運(yùn)行成功！
JQuery 之 在數(shù)據(jù)加載完成后才自動(dòng)執(zhí)行函數(shù)
進(jìn)入頁(yè)就執(zhí)行，不論等數(shù)據(jù)是否加載完成：
$(window).load(function(){ ... });
數(shù)據(jù)加載完成執(zhí)行：
$(document).ready(function(){ ... })
這個(gè)還可以簡(jiǎn)寫(xiě)成
$(function(){ ... });
出現(xiàn)這樣的問(wèn)題，說(shuō)明dom結(jié)構(gòu)加載慢，大家可以將代碼封裝到j(luò)query的加載完成再執(zhí)行即可，就不會(huì)出現(xiàn)這樣的錯(cuò)誤了
到此這篇關(guān)于js Cannot set properties of null(setting ‘onclick‘)問(wèn)題分析的文章就介紹到這了,更多相關(guān)js Cannot set properties of null內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript實(shí)現(xiàn)類(lèi)似拉勾網(wǎng)的鼠標(biāo)移入移出效果
其實(shí)也是個(gè)偶然的機(jī)會(huì)讓我想去研究一下這個(gè)效果。主要是由于有個(gè)群里的人發(fā)了個(gè)講解這個(gè)效果的鏈接，當(dāng)時(shí)也沒(méi)怎么在意，然后過(guò)兩天，突然就想起這件事，便去拉勾網(wǎng)一看，效果不錯(cuò)啊，所以就自己研究起來(lái)，現(xiàn)在將過(guò)程分享給大家，有需要的可以參考借鑒。2016-10-10
BootStrap Progressbar 實(shí)現(xiàn)大文件上傳的進(jìn)度條的實(shí)例代碼
詳解如何使用Flutter動(dòng)畫(huà)魔法使UI元素活起來(lái)
JavaScript實(shí)現(xiàn)的原生態(tài)Tab標(biāo)簽頁(yè)功能【兼容IE6】
JavaScript中的函數(shù)聲明和函數(shù)表達(dá)式區(qū)別淺析
