this.innerHTML获取的值怎么不是“橘色”?

this.innerHTML获取的值怎么不是“橘色”?

<!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 color=document.getElementById("color");
     //给菜单绑定change事件,一般作用于select或checkbox或radio
     color.onchange=function(){
     //获取当前选中的值
     var bgcolor=this.value;
                console.log(bgcolor);
                var text=this.innerHTML;
                console.log(text);
     //设置body的背景色
     div.style.background=bgcolor;
     }
     }
    </script>
</head>
<body>
    <div id="me">
     <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>

http://img1.sycdn.imooc.com/climg//58ba5a310001f48603100221.jpg

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
麻酱o 2017-03-04 19:01:17

复制你的代码跑了一遍  http://img1.sycdn.imooc.com/climg//58ba9cdf00016f7e04430182.jpg

这是控制台输出的信息  

这是关于this指向的问题,我也不是很懂

很明显在 this.innerHTML中的this指的是 select 所以会输出所有option

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师