html根据下拉框选中的值修改背景颜色
错误的写法
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>
本文来自博客园，作者：꧁执笔小白꧂，转载请注明原文链接：https://www.cnblogs.com/qq2806933146xiaobai/p/11165609.html
分类:
前端
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· 一文读懂知识蒸馏
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下