Javascript 为每个具有一个循环的div添加不同的onclick_Javascript_Loops

Javascript 为每个具有一个循环的div添加不同的onclick

javascript loops

Javascript 为每个具有一个循环的div添加不同的onclick,javascript,loops,Javascript,Loops,可能重复：我想用1个循环向我的div元素动态添加一个不同的onclick。这是我的代码的简化版本 var colors=['blue','green','yellow']; var newtxt=['box1','box2','box3']; var i; function set_element2() { var x=document.getElementById('mydiv').getElementsByTagName('div'); for(i=0;i<x.length

可能重复：

我想用1个循环向我的div元素动态添加一个不同的onclick。这是我的代码的简化版本

var colors=['blue','green','yellow'];
var newtxt=['box1','box2','box3'];

var i;
function set_element2()
{
var x=document.getElementById('mydiv').getElementsByTagName('div');
  for(i=0;i<x.length;i++)
  {

    var d=x[i];
var col=colors[i];
    var txt=newtxt[i];
d.style.background=col;
d.onclick=function(){d.innerHTML=txt};

  }
}

这样做是可行的，但是我需要在一个循环中这样做，这样我就不必为每一组div创建几十个函数，而且这并不是干的

这是我的html，样式为mydiv-height:50px；宽度：200px；边框：1px纯黑

 <body>
 <section id='mydiv'>

    <div>
</div>

<div>
</div>

<div>
</div>


 </section>
 <input type='button' onclick='set_element2()'> 
 </body>

谢谢你的回答，如果我的措辞有点混乱，很抱歉。 tl；dr我想向一组具有1个循环的div添加单独的onclick

编辑以获得更清晰的信息*

解决方案通过指定d.i=i，并使用它解决了问题

function multOnclicks()
{
var x=document.getElementById('mydiv').getElementsByTagName('div');
for(i=0;i<x.length;i++)
{

  var d=x[i];
  var col=colors[i];
  var txt=newtxt[i];

  d.style.background=col;

  d.i = i;
  d.onclick=function(){this.innerHTML=newtxt[this.i]};

  }
}

试试这个

d.onclick=function(){this.innerHTML=this.style.backgroundColor};

您可以使用JQuery吗？单击即可获得颜色…或者，很抱歉，这些链接确实与此问题相关，由于其简单性，可能这仍然会帮助一些人。这确实有效，但我编辑了我的代码以进一步澄清此问题。这个答案可以直接找到我需要的颜色，用innerHTML显示特定的文本。

d.onclick=function(){this.innerHTML=this.style.backgroundColor};