title: Uncaught TypeError: document.getElementById(...).onclick is not a function
body: <p>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 <code>onclick</code> of one of the <code>&lt;td&gt;</code> elements.</p>
  
  <p>Specifically, I get the following error on line 179: <code>Uncaught TypeError: document.getElementById(...).onclick</code> is not a function.</p>
  
  <p>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, <code>onclick</code>) to be a different function / variable. In this document, the only instance of <code>onclick</code> where the error is being thrown.</p>
  
  <p>You can view a live version of this webpage <a href="http://la.matthewpagecs.com/LinearAlgebraCalculator/index.html" rel="nofollow">here</a>, and the source is below.</p>
  
  <p>Edit: Ok, I guess linking directly to my page makes it crash for some reason. Try copying and pasting the URL instead: <a href="http://la.matthewpagecs.com/LinearAlgebraCalculator/index.html" rel="nofollow">http://la.matthewpagecs.com/LinearAlgebraCalculator/index.html</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Linear Algebra Calculator&lt;/title&gt;
      &lt;style type="text/css"&gt;
          body {
              background-color: #111111;
              color: #DDDDDD;
          }
          td {
              background-color: #444444;
              padding: 15px;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;h1&gt;Linear Algebra Calculator&lt;/h1&gt;
      &lt;p&gt;Click on one of the cells in the table below to select your matrix size.&lt;/p&gt;
      &lt;div id="table"&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td onmouseenter="newSelection(0, 0)" id="0,0"&gt;&lt;/td&gt;    
              &lt;td onmouseenter="newSelection(0, 1)" id="0,1"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(0, 2)" id="0,2"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(0, 3)" id="0,3"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(0, 4)" id="0,4"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(0, 5)" id="0,5"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(0, 6)" id="0,6"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(0, 7)" id="0,7"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(0, 8)" id="0,8"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(0, 9)" id="0,9"&gt;&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
              &lt;td onmouseenter="newSelection(1, 0)" id="1,0"&gt;&lt;/td&gt;    
              &lt;td onmouseenter="newSelection(1, 1)" id="1,1"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(1, 2)" id="1,2"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(1, 3)" id="1,3"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(1, 4)" id="1,4"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(1, 5)" id="1,5"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(1, 6)" id="1,6"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(1, 7)" id="1,7"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(1, 8)" id="1,8"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(1, 9)" id="1,9"&gt;&lt;/td&gt;
          &lt;/tr&gt;   
  
          &lt;tr&gt;
              &lt;td onmouseenter="newSelection(2, 0)" id="2,0"&gt;&lt;/td&gt;    
              &lt;td onmouseenter="newSelection(2, 1)" id="2,1"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(2, 2)" id="2,2"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(2, 3)" id="2,3"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(2, 4)" id="2,4"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(2, 5)" id="2,5"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(2, 6)" id="2,6"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(2, 7)" id="2,7"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(2, 8)" id="2,8"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(2, 9)" id="2,9"&gt;&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
              &lt;td onmouseenter="newSelection(3, 0)" id="3,0"&gt;&lt;/td&gt;    
              &lt;td onmouseenter="newSelection(3, 1)" id="3,1"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(3, 2)" id="3,2"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(3, 3)" id="3,3"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(3, 4)" id="3,4"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(3, 5)" id="3,5"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(3, 6)" id="3,6"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(3, 7)" id="3,7"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(3, 8)" id="3,8"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(3, 9)" id="3,9"&gt;&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
              &lt;td onmouseenter="newSelection(4, 0)" id="4,0"&gt;&lt;/td&gt;    
              &lt;td onmouseenter="newSelection(4, 1)" id="4,1"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(4, 2)" id="4,2"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(4, 3)" id="4,3"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(4, 4)" id="4,4"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(4, 5)" id="4,5"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(4, 6)" id="4,6"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(4, 7)" id="4,7"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(4, 8)" id="4,8"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(4, 9)" id="4,9"&gt;&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
              &lt;td onmouseenter="newSelection(5, 0)" id="5,0"&gt;&lt;/td&gt;    
              &lt;td onmouseenter="newSelection(5, 1)" id="5,1"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(5, 2)" id="5,2"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(5, 3)" id="5,3"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(5, 4)" id="5,4"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(5, 5)" id="5,5"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(5, 6)" id="5,6"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(5, 7)" id="5,7"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(5, 8)" id="5,8"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(5, 9)" id="5,9"&gt;&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
              &lt;td onmouseenter="newSelection(6, 0)" id="6,0"&gt;&lt;/td&gt;    
              &lt;td onmouseenter="newSelection(6, 1)" id="6,1"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(6, 2)" id="6,2"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(6, 3)" id="6,3"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(6, 4)" id="6,4"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(6, 5)" id="6,5"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(6, 6)" id="6,6"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(6, 7)" id="6,7"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(6, 8)" id="6,8"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(6, 9)" id="6,9"&gt;&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
              &lt;td onmouseenter="newSelection(7, 0)" id="7,0"&gt;&lt;/td&gt;    
              &lt;td onmouseenter="newSelection(7, 1)" id="7,1"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(7, 2)" id="7,2"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(7, 3)" id="7,3"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(7, 4)" id="7,4"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(7, 5)" id="7,5"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(7, 6)" id="7,6"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(7, 7)" id="7,7"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(7, 8)" id="7,8"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(7, 9)" id="7,9"&gt;&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
              &lt;td onmouseenter="newSelection(8, 0)" id="8,0"&gt;&lt;/td&gt;    
              &lt;td onmouseenter="newSelection(8, 1)" id="8,1"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(8, 2)" id="8,2"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(8, 3)" id="8,3"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(8, 4)" id="8,4"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(8, 5)" id="8,5"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(8, 6)" id="8,6"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(8, 7)" id="8,7"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(8, 8)" id="8,8"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(8, 9)" id="8,9"&gt;&lt;/td&gt;
          &lt;/tr&gt;
  
          &lt;tr&gt;
              &lt;td onmouseenter="newSelection(9, 0)" id="9,0"&gt;&lt;/td&gt;    
              &lt;td onmouseenter="newSelection(9, 1)" id="9,1"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(9, 2)" id="9,2"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(9, 3)" id="9,3"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(9, 4)" id="9,4"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(9, 5)" id="9,5"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(9, 6)" id="9,6"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(9, 7)" id="9,7"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(9, 8)" id="9,8"&gt;&lt;/td&gt;
              &lt;td onmouseenter="newSelection(9, 9)" id="9,9"&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
      &lt;/div&gt;
      &lt;h1 id="selection"&gt;&lt;/h1&gt;
      &lt;script&gt;
          function newSelection(row, column) {
              clearSelection();
              for (i = 0; i &lt;= row; i++)
                  for (j = 0; j &lt;= 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 &lt; 10; i++)
                  for (j = 0; j &lt; 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 &lt; 10; i++)
              for (j = 0; j &lt; 10; j++)
                  document.getElementById(i + "," + j).onclick(ceck)
          }
  
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>