为动态创建的<span>元素设置onClick，实现点击生成新圆形

我懂你的需求啦！你现在已经能通过按钮生成随机位置的红色圆形，但还没给这些新生成的圆形绑定点击事件对吧？其实只需要在创建<span>元素的代码里，加上一行绑定点击事件的代码就搞定了。

修改步骤： #

• 在创建完para元素并设置完所有样式后，添加这一行代码，给圆形绑定点击触发myFunction的逻辑：

  para.onclick = myFunction;
  

  或者也可以用addEventListener的方式，效果是完全一样的：

  para.addEventListener('click', myFunction);
  

• 另外提个小细节：你现在给每个生成的span都设置了同一个id="a"，这不符合HTML规范（同一个页面里id必须是唯一的）。如果不需要用id来操作这些元素的话，直接去掉para.id = "a"这一行就好；如果后续需要用id定位元素，可以改成动态生成唯一id，比如para.id = "circle-" + Date.now();。

修改后的完整代码： #

<!doctype html>
<style>
@keyframes a {
0% { opacity: 0; }
100% { opacity: 1; }
}
</style>
<div id="myDIV">
<script>
function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var x = 0
function ins() {
x = getRndInteger(0, window.innerWidth)
alert(x);
}
function myFunction() {
var para = document.createElement("SPAN");
para.style.position = "absolute";
x = getRndInteger(0, (window.innerWidth - 60))
para.style.left = x + "px"
var p = getRndInteger(0, (window.innerHeight - 60))
para.style.top = p + "px"
para.style.display = "inline-block;"
para.style.height = "50px"
para.style.width = "50px"
para.style.backgroundColor = "red"
para.style.borderRadius = "50px"
para.style.border = "1px solid black"
para.style.animation = "1s a linear"
// 给圆形绑定点击事件
para.onclick = myFunction;
document.getElementById("myDIV").appendChild(para);
}
</script>
<button onClick="ins();">Ins</button>
<button id="putin" onclick="myFunction()">Try it</button>
</div>

现在你点击任何生成的红色圆形，都会触发生成新的随机位置圆形啦！

内容的提问来源于stack exchange，提问作者Squill.is.me