代码描述:javascript点击按钮 进行不同操作。javascript点击按钮进行不同操作代码实例
本章节介绍一下如何根据点击按钮的不同来执行不同的操作,可能会有朋友说分别给按钮注册不同的事件处理函数不就可以了,确实如此,但是这里偏不采用这样的方式,而是根据按钮的value值的不同来指定不同的操作。 代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="https://www.51qianduan.com/" /> <title>51前端</title> <style type="text/css"> #box{ width:200px; font-size:12px; color:green; } #box li{height:25px;} </style> <script type="text/javascript"> window.onload=function(){ var obox=document.getElementById("box"); var lis=obox.getElementsByTagName("li"); var inputs=document.getElementsByTagName("input"); for(var index=0;index<inputs.length;index++){ inputs[index].onclick=function(){ if(this.value=="删除"){ obox.removeChild(lis[lis.length-1]); } else{ var oli=document.createElement("li"); var textNode=document.createTextNode("蚂蚁部落欢迎您"); oli.appendChild(textNode); obox.appendChild(oli); } } } } </script> <body> <ul id="box"> <li>51前端欢迎您</li> <li>51前端欢迎您</li> <li>51前端欢迎您</li> <li>51前端欢迎您</li> <li>51前端欢迎您</li> </ul> <input type="button" value="删除"/> <input type="button" value="添加"/> </body> </html>
请绑定手机号,在继续操作
注意:只有绑定手机以后,才可使用网站全部功能