使用JS闭包不将变量传递给onClick函数

Question

I read through Explaining Javascript Scope and Closures 我阅读了解释Javascript范围和闭包

but I can't seem to get the following code to work. 但我似乎无法使以下代码正常工作。 As you can see I have tried a lot of variations, and can't pass in the current value to a function that will be called later. 正如您所看到的，我尝试了很多变化，并且无法将当前值传递给稍后将调用的函数。

I want the alert to read "START" not "END" when the div is clicked... help? 我希望单击div时警报显示为“ START”而不是“ END” ...帮助吗？

 var someString = "START"; document.getElementById('elem1').onclick = function(){ return function(someString){ alert(someString); }(); }; document.getElementById('elem2').onclick = function(){ alert(someString); }; document.getElementById('elem3').onclick = function(){ alert(new String(someString)); }; document.getElementById('elem4').onclick = function(someString){ return function(someString){ alert(someString); }(); }; document.getElementById('elem5').onclick = function(someString){ return function(){ alert(someString); }(); }; document.getElementById('elem6').onclick = function(){ var newSomeString =someString; alert(newSomeString); }; var someString = "END";

 <body> <div style="background-color='yellow';display:block;" id="elem1">1</div> <br> <div style="background-color='red';display:block;" id="elem2">2</div> <br> <div style="background-color='blue';display:block;" id="elem3">3</div> <br> <div style="background-color='green';display:block;" id="elem4">4</div> <br> <div style="background-color='orange';display:block;" id="elem5">5</div> <br> <div style="background-color='pink';display:block;" id="elem6">6</div> <br> </body>

Answer 1

JavaScript is functionally-scoped. JavaScript是功能范围的。 You are attaching callback functions to all of those listeners but they are not executed until the callback is actually fired. 您正在将回调函数附加到所有这些侦听器，但在实际触发回调之前不会执行它们。 By that point, you have changed the value of the message. 到那时，您已经更改了消息的值。

If you want to encapsulate the scope, you have several options. 如果要封装范围，则有几种选择。 You could wrap the logic that is attaching the listeners in an IIFE , for one. 您可以将IIEL中附加侦听器的逻辑包装起来。

You could also just move the work to a function that you run when you're ready. 您也可以将工作移动到您准备好时运行的功能。 Here's an example of that: 这是一个例子：

var someString = "START";

setListener();

function setListener(message) {
    message = message || someString;
    document.getElementById('elem1').onclick = function(){
        alert(message);
    };
}

var someString = "END";

http://jsfiddle.net/dh2hr2px/1/ http://jsfiddle.net/dh2hr2px/1/

Answer 2

The problem is when the code gets executed. 问题是代码执行时。 When you execute the click, you have already changed its value. 执行点击时，您已经更改了它的值。 The below code will work. 以下代码将起作用。

 var someString = "START"; function createCallback() { var newSomeString = new String(someString); return function() { alert(newSomeString); } } document.getElementById('elem').onclick = createCallback(); someString = "END";

 <body> <div style="background-color='pink';display:block;" id="elem">6</div> <br> </body>

使用JS闭包不将变量传递给onClick函数

问题描述

2 个解决方案

解决方案1
0 2015-02-10 23:07:37

解决方案2
0 已采纳 2015-02-10 23:09:02

使用JS闭包不将变量传递给onClick函数

问题描述

2 个解决方案

解决方案1 0 2015-02-10 23:07:37

解决方案2 0 已采纳 2015-02-10 23:09:02

解决方案1
0 2015-02-10 23:07:37

解决方案2
0 已采纳 2015-02-10 23:09:02