Javascript 无法在动态创建的html元素上正确创建滚动

我根据名称数组上的循环动态创建了一些按钮，然后我想在这些按钮上添加滚动操作，但是代码中的警报总是将最后一项的名称打印为黑色

我试着在警报部分使用eval，但没有任何区别。 我希望它返回红色、绿色或黑色，这取决于我在鼠标上悬停的按钮

<div id="channels_buttons_container">
</div>

<script>

channels_array = ["red", "green", "black"];

for(var i = 0; i < channels_array.length; i++) {

    loop_channel_name = channels_array[i];

    // append an element inside the container
    var new_button_element = document.createElement("span");
    new_button_element.id = 'channel_button_'+loop_channel_name;
    new_button_element.innerHTML = '<br>BLA BLA';

    document.getElementById('channels_buttons_container').appendChild(new_button_element);

    // try to add rollover actions on the new button
    document.getElementById('channel_button_'+loop_channel_name).onmouseover = function(){
        alert('Rollover '+loop_channel_name);
    }

}

</script>

循环\u通道\u名称被初始化为全局变量，因为您没有使用var关键字。尝试var loop\u channel\u name，而不仅仅是loop\u channel\u name。在for循环的第一次迭代中初始化loop_channel_name时，您将其创建为一个全局变量，而在随后的迭代中，您只是更新它，而不是创建一个新的引用。通过在警报中引用loop_channel_name，您引用的是全局变量，该变量在循环的最后一次迭代中更新为黑色，因此它总是向黑色发出警报

范例

---

代码是可以的，但是当您使用loop\u channel\u name时，取数组的最后一个元素。必须通过以下方式传递实际元素：

 document.getElementById('channel_button_'+loop_channel_name).onmouseover = function(){

        alert('Rollover '+this.id);
    }

---

好的，这很有帮助。我在html元素中设置了channel\u name变量，就像这个新的\u按钮\u元素一样。channel\u name=loop\u channel\u name；然后通过new_button_element.onmouseover=函数{alertthis.channel_name}引用它；这符合标准吗？在html元素中这样设置变量？是的，在html5中，向dom节点添加属性是有效的。新建按钮元素[数据颜色]=循环通道名称；请参见示例：它返回相同的结果—loop_channel_name的最后一个实例和直接引用数组键的第二个方法—每次都返回undefined。但是我通过上面@cbertelegni提到的方法解决了这个问题，我发表了评论。我仍然不能完全理解为什么我的原始代码不能工作。

 document.getElementById('channel_button_'+loop_channel_name).onmouseover = function(){

        alert('Rollover '+this.id);
    }