錯誤的寫法
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>根據下拉框選中的值修改背景顏色</title> 6 <script type="text/javascript"> 7 function changecolo(colo){// <<錯誤點，要有返回值 8 var color=colo.value; 9 alert(color) 10 if(color="red"){ 11 document.bgcolor="#FF0000" 12 } 13 if(color="yellow"){ 14 document.bgcolor="#FFFF00" 15 } 16 if(color="green"){ 17 document.bgcolor="#00FF00" 18 } 19 if(color="blue"){ 20 document.bgcolor="#0000FF" 21 } 22 else{ 23 document.bgcolor="#FFFFFF" 24 } 25 } 26 </script> 27 </head> 28 <body> 29 <form name="form1"> 30 <select id="colo" onChange="changecolo(this)"> 31 <option value="red">紅色</option> 32 <option value="yellow">黃色</option> 33 <option value="green">綠色</option> 34 <option value="blue">藍色</option> 35 </select> 36 </form> 37 </body> 38 </html>
糾正后
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>根據下拉框選中的值修改背景顏色</title> 6 <script type="text/javascript"> 7 function changecolor(colo){ 8 var color=colo.value 9 alert(color) 10 document.bgColor=color 11 } 12 </script> 13 </head> 14 15 <body> 16 <form name="form1"> 17 <select id="colo" onChange="changecolor(this)"> 18 <option value="red">紅色</option> 19 <option value="yellow">黃色</option> 20 <option value="green">綠色</option> 21 <option value="blue">藍色</option> 22 </select> 23 </form> 24 </body> 25 </html>
或者用document.getElementById()做
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>根據下拉框選中的值修改背景顏色</title> 6 <script type="text/javascript"> 7 function changecolor(){ 8 var color=document.getElementById('colo').value 9 alert(color) 10 document.bgColor=color 11 } 12 </script> 13 </head> 14 <body> 15 <form name="form1"> 16 <select id="colo" onChange="changecolor()"> 17 <option value="red">紅色</option> 18 <option value="yellow">黃色</option> 19 <option value="green">綠色</option> 20 <option value="blue">藍色</option> 21 </select> 22 </form> 23 </body> 24 </html>