如何用JS来点击按钮

JavaScript012

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

原理

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

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

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

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

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

演示

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

页面结构如图

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

然后输入

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

这行代码

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

借助JQuery更简单实现,这里是一个用原生javascript实现的示例:

<html>

<head>

<title></title>

<script type="text/javascript">

function addButton(){

var html ="<input type=\"button\" value=\"新加\" onclick=\"newButton()\">"

document.getElementById("add").innerHTML=html

}

function newButton(){

alert("我是新加的按钮")

}

</script>

</head>

<body>

<div>

<p>点击该按钮增加一个新按钮</p>

<input type="button" value="点击增加" onclick="addButton()">

<p>新增的按钮在这显示</p>

<div id="add"></div>

</div>

</body>

</html>

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。

它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

可以在按钮元素上增加事件属性onclick,属性内写你要执行的代码或函数。

也可以在代码中直接绑定事件,如通过querySelector等查找到元素后,在元素上直接加onclick事件。

还可以通过事件指派,绑定事件在按钮上面。