4-12，麻烦老师检查一下！

来源：4-12 编程练习

脑袋瓜瓜嗡嗡的

2022-06-13 16:26:39

<!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 oOption = document.getElementsByTagName("option");
            var oSelect = document.getElementsByTagName("select")[0];
            var oDiv = document.getElementById("div");
            oSelect.onchange = function(){
                for(var i = 0;i < oOption.length;i++){
                    console.log(oOption[i].selected);
                    if(oOption[i].selected == true){     
                        if(oOption[i].value == "0"){
                            oDiv.style.backgroundColor = "white";
                            oDiv.innerText = "我没有发生任何变化";
                        }else{
                            oDiv.style.backgroundColor = oOption[i].value;
                            oDiv.innerText = "我的背景颜色变成了"+oOption[i].value+"色";
                        }
                        break;
                    }
                }
            }
        }
    </script>
</head>
<body>
        <div>
         <span>请选择您喜欢的颜色:</span>
         <select id="color" value = "yellow">
         <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回答