老师我的代码实现不出来

来源:4-12 编程练习

siegelions

2021-01-11 00:33:38

<!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>


写回答

3回答

好帮手慕久久

2021-01-14

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

祝学习愉快!

0

好帮手慕久久

2021-01-11

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

http://img.mukewang.com/climg/5ffbe394099b6a8807140322.jpg

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

祝学习愉快!

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

h021-01-14
共1条回复

好帮手慕久久

2021-01-11

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

http://img.mukewang.com/climg/5ffbce1809d0389407720087.jpg

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

将引号去掉就可以了:

http://img.mukewang.com/climg/5ffbce5f09219dbb07830125.jpg

祝学习愉快!

0
hiegelions
hp>如果不用this.value怎么写

h021-01-11
共1条回复

0 学习 · 15276 问题

查看课程