在Javascript onClick事件中传递参数 [英] Passing parameters in Javascript onClick event

问题描述

我尝试在onclick事件中传递参数。以下是示例代码：

 < div id =div>< / div& 
 
< script language =javascripttype =text / javascript> 
 var div = document.getElementById（'div'）; 
 
 for（var i = 0; i< 10; i ++）{
 var link = document.createElement（'a'）; 
 link.setAttribute（'href'，'＃'）; 
 link.innerHTML = i +''; 
 link.onclick = function（）{onClickLink（i +''）;}; 
 div.appendChild（link）; 
 div.appendChild（document.createElement（'BR'））; 
} 
 
 function onClickLink（text）{
 alert（'Link'+ text +'clicked'）; 
 return false; 
} 
< / script> 
  

但是每当我点击任何一个链接，警报总是显示Link 10 clicked p>

任何人都可以告诉我我在做什么？

感谢

解决方案

这发生是因为一旦函数被调用，我就向上传播范围。您可以使用闭包避免此问题。

  for（var i = 0; i <10; i ++）{
 var link = document.createElement（'a'）; 
 link.setAttribute（'href'，'＃'）; 
 link.innerHTML = i +''; 
 link.onclick =（function（）{
 var currentI = i; 
 return function（）{
 onClickLink（currentI +''）; 
} 
}）（）; 
 div.appendChild（link）; 
 div.appendChild（document.createElement（'BR'））; 
} 
  

或者如果你想要更简洁的语法，我建议你使用Nick Craver的解决方案。

I'm trying to pass a parameter in the onclick event. Below is a sample code:

<div id="div"></div>

<script language="javascript" type="text/javascript">
   var div = document.getElementById('div');

   for (var i = 0; i < 10; i++) {
       var link = document.createElement('a');
       link.setAttribute('href', '#');
       link.innerHTML = i + '';
       link.onclick=  function() { onClickLink(i+'');};
       div.appendChild(link);
       div.appendChild(document.createElement('BR'));
       }

   function onClickLink(text) {
       alert('Link ' + text + ' clicked');
       return false;
       }
    </script>

However whenever I click on any of the links the alert always shows 'Link 10 clicked'!

Can anyone tell me what I'm doing wrong?

Thanks

解决方案

This happens because the i propagates up the scope once the function is invoked. You can avoid this issue using a closure.

for (var i = 0; i < 10; i++) {
   var link = document.createElement('a');
   link.setAttribute('href', '#');
   link.innerHTML = i + '';
   link.onclick = (function() {
      var currentI = i;
      return function() { 
          onClickLink(currentI + '');
      }
   })();
   div.appendChild(link);
   div.appendChild(document.createElement('BR'));
}

Or if you want more concise syntax, I suggest you use Nick Craver's solution.

这篇关于在Javascript onClick事件中传递参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！