JavaScript：要素インデックスの名前を取得する方法は？

Question

は、ページを変更すると、データの属性に値を割り当てることであろう要素

<input type="button" name="test" value="test" onclick="getindex(this)"> <!--index 0--> 
<input type="button" name="test" value="test" onclick="getindex(this)"> <!--index 1--> 
<input type="button" name="test" value="test" onclick="getindex(this)"> <!--index 2--> 
<input type="button" name="test" value="test" onclick="getindex(this)"> <!--index 3--> 
... 
<script> 
function getindex(obj) { 
    var i = obj.index; //here is wrong. How to get index? 
} 
</script> 

Answer 1

の配列の問題が生じにくい方法から要素のインデックス番号を取得する必要があります：

<input type="button" name="test" value="test" onclick="getindex(this)" data-index="0"> 
<input type="button" name="test" value="test" onclick="getindex(this)" data-index="1"> 
<input type="button" name="test" value="test" onclick="getindex(this)" data-index="2"> 
<input type="button" name="test" value="test" onclick="getindex(this)" data-index="3"> 

は、次に、そのデータ属性からインデックスを取得：

<script> 
function getindex(obj) { 
    var i = parseInt(obj.dataset.index,10); 
} 
</script> 

Answer 2

要素自体は任意の指標については何も知らないので、それはこのようことはできません。この問題を解決するための1つの選択肢は、動的にボタンを作成するために、次のようになります。

<script> 
    for (var i = 0; i < 4; i++) { 
     var onClick = function() { 
     console.log(i); 
     } 

     var button = document.createElement('button'); 
     button.onclick = onClick; 
     document.querySelector('body').appendChild(button); 
    } 
</script> 

Answer 3

は、ボタンをHTMLと、ボタンのクリックでそれにアクセスしようとするインデックスと呼ばれる属性を追加します。あなたはこれを使うことができます。

<input type="button" index='0' name="test" value="test" onclick="getindex(this)"> <!--index 0--> 
<input type="button" index='1' name="test" value="test" onclick="getindex(this)"> <!--index 1--> 
<input type="button" index='2' name="test" value="test" onclick="getindex(this)"> <!--index 2--> 
<input type="button" index='3' name="test" value="test" onclick="getindex(this)"> <!--index 3--> 

<script> 
    function getindex(obj) { 
     var i = obj.getAttribute('index'); 
    } 
</script> 

Answer 4

あなたは属性を追加する必要はありません

...

here is a fiddle

<script type="text/javascript"> 
    function getindex(index) { 
     alert(index); 
    } 
</script> 

<input type="button" name="test" value="test" onclick="getindex(0)"> 
<input type="button" name="test" value="test" onclick="getindex(1)"> 
<input type="button" name="test" value="test" onclick="getindex(2)"> 
<input type="button" name="test" value="test" onclick="getindex(3)">