Question

我有一个包含10个元素的数组。起初我想要洗牌数组元素并显示它们（我当前的代码就是这样）。然后，如果单击任何显示的数组元素，我想显示alert消息。这是我遇到的问题。如果，我正在onclick，它只显示1个数组元素而不是所有10个数组元素，并且还在控制台Uncaught TypeError: Cannot set property 'onclick' of undefined中显示以下错误。我的代码是（我只使用javascript）：

 <script>
    function shuffleArray(array) {
            for (var i = array.length - 1; i > 0; i--) {
                var j = Math.floor(Math.random() * (i + 1));
                var temp = array[i];
                array[i] = array[j];
                array[j] = temp;
                }
            return array;
        }

    var myArray = ['1','2','3','4','5','6','7','8','9','10'];

    newArray = shuffleArray(myArray);

    for (i=0;i<newArray.length;i++) {
        var p = document.write(newArray[i] + "<br >");
                    p.onclick = showAlert; // this is showing me only 1 array element and also showing error in concole
    }

             function showAlert() {
                      alert("onclick Event detected!")
             }
 </script>

Answer 1

您需要创建一个实际元素，而不是尝试将事件绑定到字符串：

for (i=0;i<newArray.length;i++) {
    var p = document.createElement('p');
    p.innerHTML = newArray[i];
    p.onclick = showAlert; 
    document.body.appendChild(p);
}

http://jsfiddle.net/92fRb/1/

Answer 2

for (i=0;i<newArray.length;i++){
    var p = document.write("<span class='no'>"+newArray[i] + "</span><br />");
}

function showAlert(){
    alert("onclick Event detected!")
}

for(i=0;i<document.getElementsByClassName("no").length;i++){
    document.getElementsByClassName("no")[i].onclick=showAlert;
}

Answer 3

无法设置属性＆＃39; onclick＆＃39;未定义的

这是您的问题...... p未定义为什么呢？
因为document.write不返回DOM元素。实际上它根本不返回任何东西（或者，返回undefined）。

你想要：

使用document.createElement()创建元素。
使用p.innerHTML设置新元素的内容（内部HTML）。
将新元素附加到文档中。

您的代码可以按@Johan's answer。

无法在HTML元素上实现onclick事件

3 个答案: