怎样获取HTML的点击按钮?

怎样获取HTML的点击按钮?,第1张

你好,可以使用JavaScript获取节点的方式来获取,比如:

document.getElementById("buttonId")

注意:buttonId是HTML元素按钮的id值

如果觉得满意,望采纳!提问者的点赞和采纳就是我们的动力和追求,谢谢!

首先,我需要可以通过tagName获取所有的按钮,对你的按钮添加监听事件;

代码如下:

html:

<div id="butDIv">

<button id="1">121</button>

<button id="2">22</button>

<button id="3">222</button>

<button id="4">2222</button>

</div>

js代码:

var tempDiv=document.getElementById('butDIv')

var teBut=tempDiv.getElementsByTagName('button')

for(var i=0i<teBut.lengthi++){

teBut[i].onclick=function(){

console.log(this.id)

}

}

1、打开Sublime text3,新建一个HTML文档,并且建立好框架。

2、输入代码:

<table>

      <tr>

          <td>Student</td>

          <td><input type="text" name="student"></td>

      </tr>

      <tr>

          <td>Height</td>

          <td><input type="text" name="height"></td>

      </tr>

      <tr>

          <td colspan=2>

              <input type="button" name="add" value="add">

          </td>

      </tr>

  </table>

设立两行文本输入框,并且提示可以增加的按钮。

3、<table id="mainTable">

为标签加上id方便定位。

4、加上监听事件的函数。

onclick="adding()"

然后连接js文档。

<script src="test.js"></script>

5、function adding(){

  var table = document.getElementById("mainTable")

  var addTr = table.insertRow(2)

}

创建函数,然后设定两个变量。一个用于定位标签位置,另一个增加行数在第二行。测试一下,多次点击确实会往下移动。

6、var addTd = addTr.insertCell()

  addTd.innerHTML = "新增"

除了要增加tr还要增加td,并且增加文本提示。

7、稍微修改一下变量名字。再增加文本输入框。

function adding(){

  var table = document.getElementById("mainTable")

  var addTr = table.insertRow(2)

  var td1 = addTr.insertCell()

  td1.innerHTML = "新增"

  var td2 = addTr.insertCell()

  td2.innerHTML = "<input type='text 'name='newnew' >"

}

8、最后就可以看到按钮了。


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7054231.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-01
下一篇 2023-04-01

发表评论

登录后才能评论

评论列表(0条)

保存