javascript 创建具有唯一 onclick 事件的 div答案

【问题标题】：javascript create div with unique onclick eventjavascript 创建具有唯一 onclick 事件的 div
【发布时间】：2015-03-29 07:54:52
【问题描述】：

我已经设法动态地创建了 div（我使用 css 使它们成为蓝色圆圈）并动态地添加了唯一的 id 属性，我还想添加唯一的 onclick 事件，但我正在努力管理它。这是我的 JavaScript 代码，后面是我正在使用的 HTML：

var i = 0;

function addCircles(click) {
  var numberOfCircles = document.getElementById('setSize').value;
  var startFromOne = numberOfCircles + 1 - 81;
  document.getElementById('debug').innerHTML = numberOfCircles;

  for (i = 1; i < startFromOne; i++) {
    var element = document.createElement('div');
    element.id = "circle" + i;
    element.className = "circle";
 // element.onclick = attack(key);
    document.getElementById('gamecanvas').appendChild(element);
    document.getElementById("circle" + i).innerHTML = i;
  }
}

function attack(key) {
  if (key === 1) {
    document.getElementById('circle1').style.backgroundColor = purple;
  }
/* This is a tester, if circle1 turns purple onclick I'm good to go. */
}

我希望能够单击 div（蓝色圆圈）并更改它们的颜色。

【问题讨论】：

你从哪里得到变量key？此外，如果您编写attack(key)，它将执行该函数，而不是将其绑定到事件处理程序。
您可以使用getElementsByClassName('circle') 创建一个NodeList，您可以循环并附加一个点击事件。
尝试使用“function attack(event)”，然后在“event.target”中你应该有被点击的元素，并且在“event.target.id”中连续的id元素。
我想给我创建的每个 div onclick="attack(n)" 其中 n 的增量为 1，所以第一个 id="circle1" 的 div 将有 onclick="attack(1 )" 然后 id="circle2" 将有 onclick="attack(2)" 等等。 :) 对不起，我对此很陌生！

标签： javascript dynamic onclick unique

【解决方案1】：

这会将doAttack() 函数分配给类circle 的所有元素。然后我们只是改变函数内部的圆圈的颜色！

var circles = document.getElementsByClassName('circle');

for ( var x in circles ) {
    circles[x].onclick = doAttack;   
}

function doAttack() {
    this.style.background = 'purple';
}

编辑

这是Demo

如果你想在你的函数中做一个 if 语句，只需将 this.id 与你想要的任何东西进行比较。 if ( this.id === 'circle1' ) { .. }

【讨论】：

【解决方案2】：

另一种解决方案是在主div中添加一个onclick事件：

<div onclick="doAttack(event)">
    <div class="circle" id="circle1">
    </div>
    <div class="circle" id="circle2">
    </div>
    <div class="circle" id="circle3">
    </div>
    <div class="circle" id="circle4">
    </div>
</div>

然后在你的 doAttack 函数中：

function doAttack(event) {
    document.getElementById(event.target.id).style.backgroundColor = 'red';
}

【讨论】：