如何为集合设置 onclick 事件？ [复制]

Question

我有一个元素数组，我想对其应用某个 onclick 事件。这样做的正确方法是什么（如果可能的话）？

我想应用于每个元素的功能是这样的：

        function fade(element){
            var o = 1.0;
            var x = setInterval(function(){
                element.style.opacity = o;
                o -= 0.01;
                if(o <= 0) {
                    element.style.display = "none";
                    clearInterval(x);
                }
            }, 10);
        }

这就是我想要做的：

    <script type="text/javascript">
        var el = document.getElementsByClassName("circle");
        console.log(el[0]);
        for(var i = 0; i < el.length; i++){
            el[i].onclick = function(){ fade(el[i]); }
        }
    </script>

也就是说，我想将函数fade() 应用为circle 类的每个元素的onclick 事件，这样每当单击一个圆圈时，它就会淡出。

但是，上面的代码根本不起作用。 JavaScript 控制台给了我以下错误：

未捕获的类型错误：无法读取未定义的属性“样式”

我不确定我做错了什么，我只是在学习 Javascript。我已经搜索了这个特定的错误，但没有发现任何有用的信息。

--编辑--

我的实际代码不长，这里是：

function fade(element) {
  var o = 1.0;
  var x = setInterval(function() {
    element.style.opacity = o;
    o -= 0.01;
    if (o <= 0) {
      element.style.display = "none";
      clearInterval(x);
    }
  }, 10);
}

.circle {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  content: '';
  float: left;
}
.red {
  background-color: red;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}

<div id="red" class="circle red"></div>
<div id="blue" class="circle blue"></div>
<div id="green" class="circle green"></div>
<script type="text/javascript">
  var el = document.getElementsByClassName("circle");
  console.log(el[0]);
  for (var i = 0; i < el.length; i++) {
    el[i].onclick = function() {
      fade(el[i]);
    }
  }
</script>

Answer 1

1. 传递元素而不是数组元素
2. 获取传递的元素的副本以在 setInterval 中使用
3. 在加载事件处理程序中分配处理程序

function fade(el) {
  var o = 1.0,
    element = el, // copy the element passed
    x = setInterval(function() {
      element.style.opacity = o;
      o -= 0.01;
      if (o <= 0) {
        element.style.display = "none";
        clearInterval(x);
      }
    }, 10);
}
window.onload = function() {
  var el = document.querySelectorAll(".circle"); // more compatible
  for (var i = 0; i < el.length; i++) {
    el[i].onclick = function() {
      fade(this); // "this" is the element clicked
    }
  }

}

.circle {
  height: 200px;
  width: 200px;
  border-radius: 50%;
  content: '';
  float: left;
}
.red {
  background-color: red;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}

<div id="red" class="circle red"></div>
<div id="blue" class="circle blue"></div>
<div id="green" class="circle green"></div>