老师能帮我看一下吗

来源：4-3 编程练习

ayingga

2019-08-21 18:04:54

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="UTF-8" /> 
    <title> 选菜单</title> 
    <style type="text/css" media="screen">
     body{
     background-color:#eee;


     }
     #calculator{
     margin: 300px 0 0 500px;
     font-size: 10px;

     }
    </style>
</head> 
<body> 
 <div id="choose">
<p>请选择菜单： </p> 
  <select id="menu" >

  <option value="fruit" class="health">水果</option>
  <option value="cake" class="health">蛋糕</option>
  <option value="nuts" class="health">坚果</option>
  </select>

  <p>该系列有： </p>
    <p id="outputValue"></p>
 
 </div>
  

<script type="text/javascript"> 
var choose=document.querySelector("#choose");
var outputValue=choose.querySelector("#outputValue");
// var menus=choose.querySelector("#menu");
var items=choose.querySelectorAll(".health");

 
for (var i = 0; i < items.length; i++) {
items[i].onchange=function(){
console.log(items[i])
switch (this.value){     //this 代表 bts[i]
case "fruit":
       outputValue.innerHTML="苹果， 香蕉， 桃子， 西瓜";
    console.log(outputValue);
     break;
case "cake":
     outputValue.innerHTML="慕斯，威风，海绵";
     console.log(outputValue);
    break;
case "nuts":
      outputValue.innerHTML="巴特斯， 布啦啦";
     break;

}

}

} 


</script>

</body> 
</html>

写回答

1回答