How to get a variable that works the same way as one declared with "let" or in a with block?

Question

I'm not sure what to call this arrangement but heres a common problem - if I do this:

var buttons = document.querySelectorAll(".button"); //select a bunch of buttons
for (var i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("mouseup", function(){
        alert(buttons[i].getAttribute("data-message"));
    }); 
}

which is creating a bunch of anonymous functions, one for each button to display the message in the buttons attribute, buttons[i] has to be captured in the loop but will turn up as "undefined"

the 2 ways I know around this are 1: let statement

var buttons = document.querySelectorAll(".button"); //select a bunch of buttons
for (let i = 0; i < buttons.length; i++) {
    buttons[i].addEventListener("mouseup", function(){
        alert(buttons[i].getAttribute("data-message"));
    }); 
}

works just fine, as well as 2: with statement

var buttons = document.querySelectorAll(".button"); //select a bunch of buttons
for (var i = 0; i < buttons.length; i++) {
    with ({"button":buttons[i]}) {
        button.addEventListener("mouseup", function(){
            alert(button.getAttribute("data-message")); 
        }); 
    }
}

works fine. Problem is though, I'm faced with an employer that is on the next friggin level with his expectations on compatibility so "let" is out since its technically still not standard and "with" is also out since its being deprecated.

That leaves me with no clue on how to deal with such situations in a nice way, is there a third option that is standard and won't be deprecated?

`let buttons` works? I would expect `for (let i...` to work, but not `let buttons`? — James Thorpe, May 10 '16 at 15:34
This is a really common problem and there are tonnes of answers out their. But if you want to do let then you can look at babeljs and see how it is converting it to es5 code! — Callum Linington, May 10 '16 at 15:36

score 0 · Accepted Answer · answered May 10 '16 at 15:43

if you need to use es5 code without compiling down from es6, theres two easy ways to go about it: convert the buttons variable to an array and iterate over it with a forEach or create a small closure that you call inside your for loop:

option 1:

var buttons = document.querySelectorAll(".button"); //select a bunch of buttons
Array.prototype.forEach.call(buttons, function(el) {
    el.addEventListener("mouseup", function(){
        alert(el.getAttribute("data-message"));
    }); 
}

or option 2:

var buttons = document.querySelectorAll(".button"); //select a bunch of buttons
function addButtonListener(j){
    buttons[j].addEventListener("mouseup", function(){
        alert(buttons[j].getAttribute("data-message"));
    }); 
}

for (var i = 0; i < buttons.length; i++) {
    addButtonListener(i);
}

this closure must be called after buttons has been set

How to get a variable that works the same way as one declared with "let" or in a with block?

1 Answers1