無法在HTML元素上實現onclick事件

Question

我有一個包含10個元素的數組。 起初我想要洗牌數組元素並顯示它們（我當前的代碼就是這樣）。 然后，如果單擊任何顯示的數組元素，我想顯示alert消息。 這是我遇到的問題。 如果，我正在onclick ，它只向我顯示1個數組元素而不是所有10個數組元素，並在控制台Uncaught TypeError: Cannot set property 'onclick' of undefined顯示以下錯誤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

無法設置未定義的屬性'onclick'

這是你的問題...... p未定義。
為什么？
因為document.write不返回DOM元素。 實際上它根本不返回任何東西（或者，返回undefined ）。

你想要：

1. 使用document.createElement()創建元素。
2. 使用p.innerHTML設置新元素的內容（內部HTML）。
3. 將新元素附加到文檔中。

您的代碼可以按@ Johan的答案中的建議進行修改。