如何用JS来点击按钮

JavaScript05

如何用JS来点击按钮,第1张

原理

用JS来点击按钮需要分2步,第一步是选中按钮的元素,第二步是使用元素自带的click函数。

例如接下来我将要演示的例子中,仅用

document.getElementById("btn").click()

一行就可以控制按钮点击。

其中document.getElementById("btn")是根究id获取按钮的元素,click()是使按钮被点击一次。

演示

这是我为此问题专门写的在线演示页面点击按钮演示页面。

页面结构如图

首先点击右下角打开控制台

然后输入

document.getElementById("btn").click()

这行代码

按回车运行代码即可弹出一行提示,说明按钮被点击。你可以用鼠标点击一下按钮,也是这个效果。

1、打开Hbuilder编辑器,新建一个html空白文档,输入基本的结构,然后按下Crtl+S保存一下:

2、创建一个button按钮,给按钮设置一个id,名字设置为“myBT”,创建一个用来显示隐藏的div,将其id设置为“main”:

3、给div和button设置一些样式,为了美观好看,这里无需设置display,因为默认就是显示的:

4、编写js脚本,这里用到Jquery,给button添加一个点击事件,然后获取div的dom,判断dom中的display属性值,如果是“none”,就显示div,否则则隐藏:

5、全部完成后,按下crtl+s保存,来到编辑器的右侧,观察显示效果,此时div是显示的:

6、点击hide按钮,会发现div消失了,反复点击按钮会重复显示隐藏的效果,以上就是用JS控制div显示隐藏的案例:

这是按钮<a href="javascript:void(0)" onclick="gotopage">转到下一页</a><input type="text" id="page"/>

<script type="text/javascript">

function gotopage()

{

var Val=document.getElementById("page").value

var Url=""

switch(Val)

{

case "1":Url="http://www.baidu.com"breck

case "2":Url="http://www.google.com.hk"break

}

window.open(Url)

}

</script>

这个的中心思想是能过不同变量确定要跳转的页面。再用window.open这个函数打开页面。