时间戳

首页 > 解决方案 > 单击该元素时如何使用javascript获取HTML集合中元素的索引

javascript - 单击该元素时如何使用javascript获取HTML集合中元素的索引

问题描述

我的 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>

要走的路是什么？

标签： javascripthtmlarraysdomdom-events

解决方案

为什么不使用

if (document.readyState == 'loading') {
    document.addEventListener('DOMContentLoaded',execute);
}else{
    execute();
}
function execute() {
    const btns = document.getElementsByClassName('item');
    for(let i = 0; i < btns.length; i++){
        btns[i].addEventListener('click',function(){
            console.log('button index : '+i);
        });
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button class="item">button 1</button>
    <button class="item">button 2</button>
    <button class="item">button 3</button>
    <script src="script.js"></script>
</body>
</html>

推荐阅读