The*_*gre 5 html javascript arrays dom dom-events
我的 HTML 文件中有五个按钮。
鉴于它们是五个，我希望能够打印 HTML 集合中已单击的特定按钮的索引。即点击时btn 4我应该看到3打印的内容。我尝试将一些我认为可以做到的 JavaScript 行放在一起，但徒劳无功。JS代码是：
if (document.readyState == 'loading') {
document.addEventListener('DOMContentLoaded',execute);
}else{
execute()
}
function execute() {
var btns = document.getElementsByClassName('item');
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener('click',btnClicked);
}
}
function btnClicked(event,btns) {
var btn = event.currentTarget;
var btnIndex = btns.indexOf(btn)
console.log(btnIndex)
}<body>
<div class="btn-items">
<button class="item">btn 1 </button>
<button class="item">btn 2 </button>
<button class="item">btn 3</button>
<button class="item">btn 4</button>
<button class="item">btn 5</button>
</div>
</body>该怎么走呢？
小智 2
您可以使用此解决方案获得所需的输出
function execute() {
var btns = document.querySelectorAll('.item');
btns.forEach(btnClicked);
}
function btnClicked(btn,index) {
btn.addEventListener('click',()=>{
console.log(index)
});
}
这是实现这一目标的更清洁的方法。