黑马程序员技术交流社区

标题: 【广州前端】-【超实用的控制台推断bug方法】 [打印本页]

作者: AMay 时间: 2019-6-12 20:57
标题: 【广州前端】-【超实用的控制台推断bug方法】

如下案例

2. 出现的问题：

2.1 问题1：无论如何点击蓝色按钮，盒子都没有变化

找bug：在函数的首行console.log(1),测试能否进入事件处理程序（function）

然后浏览器点击蓝色按钮后在控制没有输出1，

那么看24行的按钮有没有获取成功

2.1 解决问题1：第一个按钮获取错误，蓝色按钮是 input[0]

2.2 问题2：已经确保按钮获取成功之后，然后浏览器点击蓝色按钮后在控制还是没有输出1，

那么证明代码还是无法正确触发点击事件，无法运行到第26行，此时只剩下事件名字没有检查，再认真看

2.2 解决问题2：事件名click单词写错，把onclcik 修改为 onclick

2.3 问题3：

浏览器点击蓝色按钮后在控制台输出1了，但是再次出现问题：点击蓝色按钮，div盒子仍然没有变化

找bug：在box.style.backgroundColor = color;这行代码前面输入console.log(box),检查box元素是否出问题

控制台的显示如下图：

2.3 解决问题3：

观看控制台发现，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]

3. 原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>

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2