let und var funktion

by Ulrich Bangert

HTML

<h1>
Using var: Click the buttons and watch what happens
</h1>
<button class="btn1">1</button>
<button class="btn1">2</button>
<button class="btn1">3</button>
<button class="btn1">4</button>
<button class="btn1">5</button>
    
<h1>
Using let; click the buttons and watch what happens
</h1>
<button class="btn2">1</button>
<button class="btn2">2</button>
<button class="btn2">3</button>
<button class="btn2">4</button>
<button class="btn2">5</button>    
<h1> 

Using jQuery.each: click the buttonS and watch what happens
</h1>
<button class="btn3">1</button>
<button class="btn3">2</button>
<button class="btn3">3</button>
<button class="btn3">4</button>
<button class="btn3">5</button>

JavaScript

var buttons1 = document.querySelectorAll(".btn1");
for(var i1 = 0; i1 < buttons1.length; i1++) {
    buttons1[i1].addEventListener("click", function () {
        alert(i1);
    });
}


var buttons2 = document.querySelectorAll(".btn2");
for(let i2 = 0; i2 < buttons1.length; i2++) {
    buttons2[i2].addEventListener("click", function () {
        alert(i2);
    });
}


$(".btn3").each(function(idx, item) {
    $(item).on("click", function() {
        alert(idx);
    });
})