超實用的控制檯推斷bug方法

時間 2020-01-16

標籤實用控制檯推斷 bug 方法简体版

原文原文鏈接

以下案例html

出現的問題：
2.1 問題1：不管如何點擊藍色按鈕，盒子都沒有變化數組

找bug： 在函數的首行console.log(1),測試可否進入事件處理程序（function）

 而後瀏覽器點擊藍色按鈕後在控制沒有輸出1，
 那麼看24行的按鈕有沒有獲取成功

2.1 解決問題1：第一個按鈕獲取錯誤，藍色按鈕是 input[0]瀏覽器

2.2 問題2：已經確保按鈕獲取成功以後，而後瀏覽器點擊藍色按鈕後在控制仍是沒有輸出1，dom

那麼證實代碼仍是沒法正確觸發點擊事件，沒法運行到第26行，此時只剩下事件名字沒有檢查，再認真看

2.2 解決問題2：事件名click單詞寫錯，把onclcik 修改成 onclick函數

2.3 問題3：測試

瀏覽器點擊藍色按鈕後在控制檯輸出1了，可是再次出現問題：點擊藍色按鈕，div盒子仍然沒有變化
 找bug： 在box.style.backgroundColor = color;這行代碼前面輸入console.log(box),檢查box元素是否出問題
 
控制檯的顯示以下圖：

2.3 解決問題3：this

觀看控制檯發現，28行打印的是一個僞數組格式的數據，並非一個標籤結構，
 因此引起了第29行的報錯....'backgroundColor' of  undefined...
 往前面找到box獲取的地方，在第22行代碼處，咱們是經過getElementsByClassName("box")類名的方式獲取元素的，這種方式獲取元素，獲得的是一個僞數組，僞數組裏面存儲的纔是咱們要的dom元素,咱們須要經過索引box[0]的方式把dom元素獲取出來
因此，把第29行代碼，修改成box[0].style.backgroundColor = "red"
         或者把第22行修改爲   var box = document.getElementsByClassName("box")[0]

原bug代碼，你們能夠嘗試調試一下

[HTML] 純文本查看複製代碼
?調試

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 300px;
height: 300px;
background-color: lightpink;
}
</style>
</head>
<body>
<div class="box"></div>
<input type="button" value="藍色" bgColor="blue"/>
<input type="button" value="橙色" bgColor="orange"/>
<input type="button" value="黃綠色" bgColor="green"/>
<script>
// 需求：點擊按鈕切換顏色
var inputs = document.getElementsByTagName("input");
var box = document.getElementsByClassName("box");
//點擊藍色按鈕，變box盒子變藍色
for(var i=0; i<inputs.length; i++){
inputs[1].onclcik = function(){
var color = this.getAttribute("bgColor");
box.style.backgroundColor = color;
}
}
</script>
</body>
</html>
更多技術資訊可關注：gzitcastcode

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。