Uncaught TypeError: document.getElementById (...). Onclick не является функцией

Я запускаю этот код, чтобы попытаться позволить пользователям выбрать размер таблицы/матрицы. Пользователи могут щелкнуть в таблице, чтобы выбрать размер матрицы. Тем не менее, я получаю сообщение об ошибке, когда пытаюсь получить доступ к onclick одного из элементов <td>.Uncaught TypeError: document.getElementById (...). Onclick не является функцией

В частности, я получаю следующую ошибку в строке 179: Uncaught TypeError: document.getElementById(...).onclick не является функцией.

Я искал эту ошибку в предыдущих вопросах stackoverflow, и кажется, что люди делали это в прошлом, было переопределить функцию (в моем случае, 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>

источник

2015-07-24 CaptainForge

onclick действительно не функция, а свойство. Вы должны назначить ему функцию для обработки события. Таким образом, это должно быть:

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

источник

2015-07-24 18:47:49 dfsq

Хорошо, что помогло! Но теперь, когда веб-страница загружается, она автоматически щелкает вторую загруженную ячейку, даже если я даже не перемещаю мышь на веб-страницу. Это что-то, что мне нужно учитывать? Или есть способ остановить вызов ceck при загрузке страницы? – CaptainForge

Невозможно воспроизвести: http://plnkr.co/edit/02wm1Qn6syMxM2zQOrcl?p=preview Я думаю, у вас есть что-то еще на странице. – dfsq

, когда вы назначаете функцию onclick, она должна быть анонимной функцией или функцией, возвращающей функцию, иначе она будет выполняться при назначении: 'document.getElementById (i +", "+ j) .onclick = function() {ceck();}; ' – brianclements

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"); };

источник

2015-07-24 18:54:51

Uncaught TypeError: document.getElementById (...). Onclick не является функцией

ответ

Смежные вопросы