老师这个效果怎么实现？
来源：3-12 编程练习
qq_慕运维6460539
2020-07-27 12:47:23
我想实现当我连续选择了同一个颜色，div内的文字变为“我的背景颜色没有发生改变”，应该怎么做？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>onchange()</title>
<style type="text/css">
#div{
width:300px;
height:300px;
border:2px solid gray;
margin:100px 0 0 200px;
}
</style>
<script type="text/javascript">
window.onload=function(){
var bgSet=document.getElementById('color'),
contents=document.getElementById('div');
bgSet.onchange=function(){
if (this.value=='0') {
contents.style.backgroundColor='#fff';
contents.innerText="我没有发生任何变化"
}else{
contents.style.backgroundColor=this.value;
contents.innerText="我的背景颜色变成了"+this.value+"色";
}
}
}
//补充代码
</script>
</head>
<body>
<div>
<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>
1回答
-
好帮手慕码
2020-07-27
同学你好，这个效果是无法实现的。
1、当不改变option的时候，是不触发change事件的，因此无法在change事件中写逻辑；
2、option绑定点击事件，是不生效的；
3、假如给select绑定了点击实现，改变事件是先于点击事件的，因此实现会有问题。
所以无法实现。实际开发中，如果要实现这个效果的话，会自定义下拉框去实现，目前我们还处于学习阶段，可以先不考虑。
祝学习愉快~
0
相似问题