老师我的代码实现不出来

老师我的代码实现不出来

<!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");

               var div=document.getElementById("div");

               color.onchange=function(){

                   if(this.value=="0"){

                       div.style.backgroundColor="white";

                       div.innerText="我没有发生任何变化";

                   }else{

                       div.style.backgroundColor="this.value";

                       div.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

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

3回答
好帮手慕久久 2021-01-14 13:34:32

同学你好,因为select标签比较特殊,可以直接通过“select标签.value”的形式获取到选中的option标签的value值。这是固定的用法,记住即可。

祝学习愉快!

好帮手慕久久 2021-01-11 13:38:23

同学你好,在事件处理函数中,this指代的是事件触发者。所以可以把this.value换成color.value,如下:

http://img1.sycdn.imooc.com//climg/5ffbe394099b6a8807140322.jpg

对select标签来说,使用value获取选中的值是最通用的方式,所以同学会使用value就行了。

祝学习愉快!

  • 提问者 siegelions #1

    color识别的是select标签,value是在option里面 为什么可以用color.value

    2021-01-14 11:36:28
好帮手慕久久 2021-01-11 12:05:02

同学你好, 如下代码书写不正确:

http://img1.sycdn.imooc.com//climg/5ffbce1809d0389407720087.jpg

this.value是获取的select标签的value值,不能用引号包裹,包裹后就成了字符串。

将引号去掉就可以了:

http://img1.sycdn.imooc.com//climg/5ffbce5f09219dbb07830125.jpg

祝学习愉快!

  • 提问者 siegelions #1

    如果不用this.value怎么写

    2021-01-11 12:57:13
问题已解决,确定采纳
还有疑问,暂不采纳

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

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

0 星
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

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