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

Question

I am running this code to try to let users select the size of a table / matrix. Users can click in a table to select the size of the matrix. However, I'm getting an error for when I try to access onclick of one of the <td> elements.

Specifically, I get the following error on line 179: Uncaught TypeError: document.getElementById(...).onclick is not a function.

I've looked up this error on previous stackoverflow questions, and it seems what people did in the past was redeclare the function (in my case, onclick) to be a different function / variable. In this document, the only instance of onclick where the error is being thrown.

You can view a live version of this webpage here, and the source is below.

Edit: Ok, I guess linking directly to my page makes it crash for some reason. Try copying and pasting the URL instead: 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>

dfsq · Accepted Answer · 2015-07-24 18:47:49Z

6

onclick is indeed not a function but property. You should assign a function to it to handle event. So it should be:

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

answered Jul 24, 2015 at 18:47

dfsq

193k26 gold badges244 silver badges261 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

CaptainForge Over a year ago

Ok, that helped! But now whenever the web page is loaded, it automatically clicks the second cell loaded, without me even moving the mouse into the web page. Is this just something I need to account for? Or is there a way to stop ceck from being called when the page loads?

dfsq Over a year ago

Cannot reproduce: plnkr.co/edit/02wm1Qn6syMxM2zQOrcl?p=preview I guess you have something else on the page.

clemtibs Over a year ago

when you assign a function to onclick, it needs to be an anonymous function, or a function that returns a function, or else it will run on assignment: document.getElementById(i + "," + j).onclick = function() {ceck();};

SK. · Accepted Answer · 2015-07-24 18:54:51Z

3

MDN - onclick is a property.

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

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

Or you can use an anonymous function, like this:

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

answered Jul 24, 2015 at 18:54

SK.

4,3885 gold badges33 silver badges51 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

3 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Related