JS获取五个button点击当前按钮的下标
时间: 2023-08-14 18:34:05 浏览: 156
可以通过循环遍历五个按钮,为每个按钮添加点击事件处理函数,然后在事件处理函数中获取当前按钮的下标。具体代码如下:
```html
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<script>
// 获取所有按钮元素
var buttons = document.getElementsByTagName("button");
// 循环遍历所有按钮,并为每个按钮添加点击事件处理函数
for (var i = 0; i < buttons.length; i++) {
buttons[i].addEventListener("click", function() {
// 在事件处理函数中获取当前按钮的下标
var index = Array.prototype.indexOf.call(buttons, this);
console.log("当前点击的按钮下标是:" + index);
});
}
</script>
```
这个代码中,首先使用getElementsByTagName()方法获取所有的button元素,然后循环遍历每个按钮,并为它们添加点击事件处理函数。在事件处理函数中,使用Array.prototype.indexOf方法获取当前按钮在按钮数组中的下标,并将其输出到控制台。需要注意的是,在事件处理函数中,this指向当前点击的按钮元素。
阅读全文
相关推荐


















