请老师帮我解答一下，注释里面的问题，谢谢
来源：4-12 编程练习
慕神3111110
2021-07-01 19:54:18
<!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>Document</title>
<style>
#div{
width: 200px;
height: 200px;
border: 1px solid #000;
margin:10px 10px;
}
</style>
<script>
window.onload=function(){
var color=document.getElementById("color");
var box=document.getElementById("div");
var coloroption=document.getElementsByTagName("option");
// 为什么onchange的是color，不是coloroption呢？
color.onchange=function(){
// 为什么这里的this代表的不是color而是option？
var bc=this.value;
if(bc==0){
box.style.backgroundColor="#fff";
box.innerText="我没有发生任何改变"
}
else{
box.style.backgroundColor=bc;
box.innerText="我变成了"+bc+"色"
}
}
}
</script>
</head>
<body>
<span>请选择您喜欢的颜色:</span>
<select id="color">
<option value="0">请选择</option>
<option value="yellow">黄色</option>
<option value="orange">橘色</option>
<option value="pink">粉色</option>
<option value="purple">紫色</option>
</select>
</div>
<div id="div">我是div</div>
</body>
</html>
2回答
-
同学你好，代码实现效果没问题。
另外记住select这种特殊用法即可，onchange事件需要绑定在select上，option绑定不上，this.value会直接获取选择某项option的value值。
祝学习愉快！
0 -
Fishbone4440137
2021-07-02
color是个select，onChange是执行值改变事件的，option直接.onChange是没有值改变的判断的，this执行function前面的元素
0
相似问题