Link to jsFiddle: http://jsfiddle.net/6Y8FU/
I'm querying all tr.tableWinkelwagen-productItem in this table using:
var productItemAll = document.querySelectorAll(".tableWinkelwagen-productItem")
This is the tabel:
<table class="tableWinkelwagen">
<tr>
<th>Product(en)</th>
<th>Prijs</th>
<th>Aantal</th>
<th>Totaal</th>
<th></th>
</tr>
<tr class="tableWinkelwagen-productItem" data-id="1">
<td>Treinreis Utrecht - Boedapest <br> <small>05/08/2014 - 05/08/2014</small></td>
<td>€<span class="priceUnit">170</span>,-</td>
<td><div class="boxNumbers"><i class="glyphicon glyphicon-minus-sign boxNumbers-min"></i> <input type="text" class="boxNumbers-input priceAmount" placeholder=""> <i class="glyphicon glyphicon-plus-sign boxNumbers-plus"></i></div></td>
<td>€<span class="priceTotal">340</span>,-</td>
<td><a href="" class="glyphicon glyphicon-trash"></a></td>
</tr>
<tr class="tableWinkelwagen-productItem" data-id="1">
<td>Treinreis Utrecht - Boedapest <br> <small>05/08/2014 - 05/08/2014</small></td>
<td>€<span class="priceUnit">170</span>,-</td>
<td><div class="boxNumbers"><i class="glyphicon glyphicon-minus-sign boxNumbers-min"></i> <input type="text" class="boxNumbers-input priceAmount" placeholder=""> <i class="glyphicon glyphicon-plus-sign boxNumbers-plus"></i></div></td>
<td>€<span class="priceTotal">340</span>,-</td>
<td><a href="" class="glyphicon glyphicon-trash"></a></td>
</tr>
<tr>
<td><strong>Totaal</strong></td>
<td></td>
<td></td>
<td>€<span>340</span>,-</td>
<td></td>
</tr>
</table>
This, of course, gives me a nodeList with the 2 tr's.
I'm then adding an eventListener to each of the i.boxNumbers-min inside a tr using this code:
function addEventListenerToMinPlus(){
var x, y
for(var i = 0; i < productItemAll.length; i++){
x = productItemAll[i].querySelector(".boxNumbers-min")
x.addEventListener("click", function(){updateProduct(i)})
console.log(x)
}
}
The console prints out both tr's fine but when i execute the function updateProduct(i), initiated with a click i get a popop with the value 2 and not "0" and "1".
function updateProduct(jow){
alert(jow)
}
Why do i always get the value "2" and not "0" or "1" when clicking on the i.boxNumbers-min buttons?
Link to jsFiddle: http://jsfiddle.net/6Y8FU/