4-12 作业（请老师检查一下～）

来源：4-12 编程练习

热心市民F

2021-10-10 23:37:30

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>onchange()</title>
    <style type="text/css">
      #div {
        width: 300px;
        height: 300px;
        border: 2px solid gray;
        margin: 100px 0 0 0;
      }
    </style>
    <script type="text/javascript">
      //补充代码
      window.onload = function () {
        var ocolor = document.getElementById("color");
        var odiv = document.getElementById("div");
        console.log(ocolor, odiv);
        ocolor.onchange = function () {
          console.log(ocolor.value);
          switch (ocolor.value) {
            case "0":
              odiv.style.backgroundColor = "white";
              odiv.innerText = "我没有发生任何变化";
              break;
            case "yellow":
              odiv.style.backgroundColor = "yellow";
              odiv.innerText = "我的背景成了黄色！";
              break;
            case "orange":
              odiv.style.backgroundColor = "orange";
              odiv.innerText = "我的背景成了橘色！";
              break;
            case "pink":
              odiv.style.backgroundColor = "pink";
              odiv.innerText = "我的背景成了粉色！";
              break;
            case "purple":
              odiv.style.backgroundColor = "purple";
              odiv.innerText = "我的背景成了紫色！";
              break;
          }
        };
      };
    </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>