Uncaught TypeError: document.getElementById(...).onclick is not a function

Question

我运行这段代码试图让用户select大小为一个table/矩阵。用户可以点击一个table到select大小的矩阵。但是，当我尝试访问 <td> 元素之一的 onclick 时出现错误。

具体来说，我在第 179 行收到以下错误：Uncaught TypeError: document.getElementById(...).onclick 不是函数。

我在以前的 Whosebug 问题中查找了这个错误，过去人们所做的似乎是将函数（在我的例子中，onclick）重新声明为不同的函数/变量。在本文档中，只有 onclick 抛出错误的实例。

您可以查看此网页的实时版本here，来源在下方。

编辑：好的，我想直接链接到我的页面会导致它因某种原因崩溃。尝试复制并粘贴 URL：http://la.matthewpagecs.com/LinearAlgebraCalculator/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Linear Algebra Calculator</title>
    <style type="text/css">
        body {
            background-color: #111111;
            color: #DDDDDD;
        }
        td {
            background-color: #444444;
            padding: 15px;
        }
    </style>
</head>
<body>
    <h1>Linear Algebra Calculator</h1>
    <p>Click on one of the cells in the table below to select your matrix size.</p>
    <div id="table">
    <table>
        <tr>
            <td onmouseenter="newSelection(0, 0)" id="0,0"></td>    
            <td onmouseenter="newSelection(0, 1)" id="0,1"></td>
            <td onmouseenter="newSelection(0, 2)" id="0,2"></td>
            <td onmouseenter="newSelection(0, 3)" id="0,3"></td>
            <td onmouseenter="newSelection(0, 4)" id="0,4"></td>
            <td onmouseenter="newSelection(0, 5)" id="0,5"></td>
            <td onmouseenter="newSelection(0, 6)" id="0,6"></td>
            <td onmouseenter="newSelection(0, 7)" id="0,7"></td>
            <td onmouseenter="newSelection(0, 8)" id="0,8"></td>
            <td onmouseenter="newSelection(0, 9)" id="0,9"></td>
        </tr>

        <tr>
            <td onmouseenter="newSelection(1, 0)" id="1,0"></td>    
            <td onmouseenter="newSelection(1, 1)" id="1,1"></td>
            <td onmouseenter="newSelection(1, 2)" id="1,2"></td>
            <td onmouseenter="newSelection(1, 3)" id="1,3"></td>
            <td onmouseenter="newSelection(1, 4)" id="1,4"></td>
            <td onmouseenter="newSelection(1, 5)" id="1,5"></td>
            <td onmouseenter="newSelection(1, 6)" id="1,6"></td>
            <td onmouseenter="newSelection(1, 7)" id="1,7"></td>
            <td onmouseenter="newSelection(1, 8)" id="1,8"></td>
            <td onmouseenter="newSelection(1, 9)" id="1,9"></td>
        </tr>   

        <tr>
            <td onmouseenter="newSelection(2, 0)" id="2,0"></td>    
            <td onmouseenter="newSelection(2, 1)" id="2,1"></td>
            <td onmouseenter="newSelection(2, 2)" id="2,2"></td>
            <td onmouseenter="newSelection(2, 3)" id="2,3"></td>
            <td onmouseenter="newSelection(2, 4)" id="2,4"></td>
            <td onmouseenter="newSelection(2, 5)" id="2,5"></td>
            <td onmouseenter="newSelection(2, 6)" id="2,6"></td>
            <td onmouseenter="newSelection(2, 7)" id="2,7"></td>
            <td onmouseenter="newSelection(2, 8)" id="2,8"></td>
            <td onmouseenter="newSelection(2, 9)" id="2,9"></td>
        </tr>

        <tr>
            <td onmouseenter="newSelection(3, 0)" id="3,0"></td>    
            <td onmouseenter="newSelection(3, 1)" id="3,1"></td>
            <td onmouseenter="newSelection(3, 2)" id="3,2"></td>
            <td onmouseenter="newSelection(3, 3)" id="3,3"></td>
            <td onmouseenter="newSelection(3, 4)" id="3,4"></td>
            <td onmouseenter="newSelection(3, 5)" id="3,5"></td>
            <td onmouseenter="newSelection(3, 6)" id="3,6"></td>
            <td onmouseenter="newSelection(3, 7)" id="3,7"></td>
            <td onmouseenter="newSelection(3, 8)" id="3,8"></td>
            <td onmouseenter="newSelection(3, 9)" id="3,9"></td>
        </tr>

        <tr>
            <td onmouseenter="newSelection(4, 0)" id="4,0"></td>    
            <td onmouseenter="newSelection(4, 1)" id="4,1"></td>
            <td onmouseenter="newSelection(4, 2)" id="4,2"></td>
            <td onmouseenter="newSelection(4, 3)" id="4,3"></td>
            <td onmouseenter="newSelection(4, 4)" id="4,4"></td>
            <td onmouseenter="newSelection(4, 5)" id="4,5"></td>
            <td onmouseenter="newSelection(4, 6)" id="4,6"></td>
            <td onmouseenter="newSelection(4, 7)" id="4,7"></td>
            <td onmouseenter="newSelection(4, 8)" id="4,8"></td>
            <td onmouseenter="newSelection(4, 9)" id="4,9"></td>
        </tr>

        <tr>
            <td onmouseenter="newSelection(5, 0)" id="5,0"></td>    
            <td onmouseenter="newSelection(5, 1)" id="5,1"></td>
            <td onmouseenter="newSelection(5, 2)" id="5,2"></td>
            <td onmouseenter="newSelection(5, 3)" id="5,3"></td>
            <td onmouseenter="newSelection(5, 4)" id="5,4"></td>
            <td onmouseenter="newSelection(5, 5)" id="5,5"></td>
            <td onmouseenter="newSelection(5, 6)" id="5,6"></td>
            <td onmouseenter="newSelection(5, 7)" id="5,7"></td>
            <td onmouseenter="newSelection(5, 8)" id="5,8"></td>
            <td onmouseenter="newSelection(5, 9)" id="5,9"></td>
        </tr>

        <tr>
            <td onmouseenter="newSelection(6, 0)" id="6,0"></td>    
            <td onmouseenter="newSelection(6, 1)" id="6,1"></td>
            <td onmouseenter="newSelection(6, 2)" id="6,2"></td>
            <td onmouseenter="newSelection(6, 3)" id="6,3"></td>
            <td onmouseenter="newSelection(6, 4)" id="6,4"></td>
            <td onmouseenter="newSelection(6, 5)" id="6,5"></td>
            <td onmouseenter="newSelection(6, 6)" id="6,6"></td>
            <td onmouseenter="newSelection(6, 7)" id="6,7"></td>
            <td onmouseenter="newSelection(6, 8)" id="6,8"></td>
            <td onmouseenter="newSelection(6, 9)" id="6,9"></td>
        </tr>

        <tr>
            <td onmouseenter="newSelection(7, 0)" id="7,0"></td>    
            <td onmouseenter="newSelection(7, 1)" id="7,1"></td>
            <td onmouseenter="newSelection(7, 2)" id="7,2"></td>
            <td onmouseenter="newSelection(7, 3)" id="7,3"></td>
            <td onmouseenter="newSelection(7, 4)" id="7,4"></td>
            <td onmouseenter="newSelection(7, 5)" id="7,5"></td>
            <td onmouseenter="newSelection(7, 6)" id="7,6"></td>
            <td onmouseenter="newSelection(7, 7)" id="7,7"></td>
            <td onmouseenter="newSelection(7, 8)" id="7,8"></td>
            <td onmouseenter="newSelection(7, 9)" id="7,9"></td>
        </tr>

        <tr>
            <td onmouseenter="newSelection(8, 0)" id="8,0"></td>    
            <td onmouseenter="newSelection(8, 1)" id="8,1"></td>
            <td onmouseenter="newSelection(8, 2)" id="8,2"></td>
            <td onmouseenter="newSelection(8, 3)" id="8,3"></td>
            <td onmouseenter="newSelection(8, 4)" id="8,4"></td>
            <td onmouseenter="newSelection(8, 5)" id="8,5"></td>
            <td onmouseenter="newSelection(8, 6)" id="8,6"></td>
            <td onmouseenter="newSelection(8, 7)" id="8,7"></td>
            <td onmouseenter="newSelection(8, 8)" id="8,8"></td>
            <td onmouseenter="newSelection(8, 9)" id="8,9"></td>
        </tr>

        <tr>
            <td onmouseenter="newSelection(9, 0)" id="9,0"></td>    
            <td onmouseenter="newSelection(9, 1)" id="9,1"></td>
            <td onmouseenter="newSelection(9, 2)" id="9,2"></td>
            <td onmouseenter="newSelection(9, 3)" id="9,3"></td>
            <td onmouseenter="newSelection(9, 4)" id="9,4"></td>
            <td onmouseenter="newSelection(9, 5)" id="9,5"></td>
            <td onmouseenter="newSelection(9, 6)" id="9,6"></td>
            <td onmouseenter="newSelection(9, 7)" id="9,7"></td>
            <td onmouseenter="newSelection(9, 8)" id="9,8"></td>
            <td onmouseenter="newSelection(9, 9)" id="9,9"></td>
        </tr>
    </table>
    </div>
    <h1 id="selection"></h1>
    <script>
        function newSelection(row, column) {
            clearSelection();
            for (i = 0; i <= row; i++)
                for (j = 0; j <= column; j++)
                    document.getElementById(i + "," + j).style.backgroundColor = "#CCCCCC";
            row++;
            column++;
            document.getElementById("selection").innerHTML = row + " x " + column + " matrix";
        }

        function clearSelection() {
            for (i = 0; i < 10; i++)
                for (j = 0; j < 10; j++)
                    document.getElementById(i + "," + j).style.backgroundColor = "#444444";
        }

        function ceck() {
            document.getElementById("table").innerHTML = "You selected an element.";
        }

        // add onclick listeners
        window.onload = function() {
        for (i = 0; i < 10; i++)
            for (j = 0; j < 10; j++)
                document.getElementById(i + "," + j).onclick(ceck)
        }

    </script>
</body>
</html>

Answer 1

onclick确实不是函数而是属性。您应该为其分配一个函数来处理事件。所以应该是：

document.getElementById(i + "," + j).onclick = ceck;

Answer 2

MDN - onclick 是属性.

The onclick property returns the click event handler code on the current element.

document.getElementById(i + "," + j).onclick = ceck;

或者你可以使用匿名函数，像这样：

document.getElementById(i + "," + j).onclick = function() { alert("Hello"); };

Uncaught TypeError: document.getElementById(...).onclick is not a function

Uncaught TypeError: document.getElementById(...).onclick is not a function

html

javascript

jquery

onclick