0

There is an elements object, which is not Array but array-like HTML object.
I need to alert innerHTML of each element in 1 second after click on it.
I wrote this code (below), but it doesn't work.

[].forEach.call(elements, function (element) {
    element.onclick = () => setTimeout(alert(element.innerHTML), 1000);
});

I intuitively know that there is an error in this code (even without its execution), but I don't know where and what is it like (something wrong with arguments maybe?).
Use of forEach is mandatory (indexer i is used in original code).

Perhaps omitting insignificant details of the problem, I missed something meaningful. So I bring a more complete piece of code:

var colors = ["red", "green", "blue"];
var fragment = document.createDocumentFragment();

colors.forEach(function (color, i) {
    var span = document.createElement("SPAN");
    span.style.backgroundColor = color;
    span.tabIndex = i + 1;
    span.onclick = () => setTimeout(console.log(span.innerHTML), 1000);
    fragment.appendChild(span);
});
Dima Parzhitsky
  • 3,716
  • 2
  • 20
  • 37
  • 1
    What does "it doesn't work" mean? Errors in the console? Wrong behavior? – JJJ Nov 06 '15 at 22:44
  • @Juhana: Wrong behavior. It cannot find variable `element` (it is undefined in global scope). – Dima Parzhitsky Nov 06 '15 at 22:48
  • 2
    Wait what? Of course `element` is not defined in global scope, but what does that matter? You are not trying to access it in global scope. – Felix Kling Nov 06 '15 at 22:49
  • @FelixKling: Really? :) – Dima Parzhitsky Nov 06 '15 at 22:51
  • Do you *know* that it's undefined (the console should show an error) or did you just guess that it's the issue? – JJJ Nov 06 '15 at 22:52
  • @Juhana: I know it, it was a sort of sarcasm. – Dima Parzhitsky Nov 06 '15 at 22:53
  • @DmitryParzhitsky - do you notice that `alert` appears without 1 second delay? – Igor Nov 06 '15 at 22:54
  • 1
    @Dmitry: Not sure how I should interpret your response to my comment, but yes, really. – Felix Kling Nov 06 '15 at 22:57
  • 1
    You're not showing your actual code. The variable is always defined in the code you've shown in the question. – JJJ Nov 06 '15 at 22:59
  • `element` is local variable in the scope of `forEach`, it is obvious. – Dima Parzhitsky Nov 06 '15 at 23:20
  • @DmitryParzhitsky: Then why did you say the issue is *"It cannot find variable `element` (it is undefined in global scope)"*. If `element` has the **value** `undefined` (which I assume that is what you mean, but not sure), then `elements` may not be what you think it is. The variable `element` definitely exists where you access it. – Felix Kling Nov 06 '15 at 23:26
  • @FelixKling: Sorry for misunderstanding. The main issue is described in question: I need to `alert` `innerHTML` of each `element` in 1 second after `click` on it. – Dima Parzhitsky Nov 06 '15 at 23:29
  • @Dmitry: That's not the issue, that is your goal. What is the *problem* with your code? There is an obvious problem (which is why I closed it as duplicate) but there seems to be something else based on your comment (but it's not clear what exactly it is). – Felix Kling Nov 06 '15 at 23:29
  • @FelixKling: I don't know. It just doesn't work the way I want. It returns "`element` is undefined". I can understand why it returns this error, but I can't understand why the whole code doesn't work. – Dima Parzhitsky Nov 06 '15 at 23:31
  • The code doesn't return anything... where / how do you see that message? Please use precise language to describe the issue. Things would be a lot easier if you'd provide a complete example that reproduces the issue. – Felix Kling Nov 06 '15 at 23:53
  • @FelixKling: I got it. The _problem_ occured because I used `with` incorrectly (in other part of code). Shame on me. – Dima Parzhitsky Nov 07 '15 at 00:00

1 Answers1

1

You need to wrap alert in one more anonymous function:

[].forEach.call(elements, function (element) {
    element.onclick = () => setTimeout(() => alert(element.innerHTML), 1000);
});

otherwise it is setTimeout(alert(element.innerHTML), 1000); when transpiled and you need setTimeout(function() {alert(element.innerHTML)}, 1000);

dfsq
  • 182,609
  • 24
  • 222
  • 242