Question

我已经设法动态创建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（蓝色圆圈）并更改颜色。

Answer 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' ) { .. }

Answer 2

另一种解决方案是将onclick事件添加到主div：

<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';
}

javascript使用唯一的onclick事件创建div

2 个答案:

修改