时间戳

首页 > 解决方案 > 在 JS 中创建动态表，“Cannot read property 'addEventListener' of null”

javascript - 在 JS 中创建动态表，“Cannot read property 'addEventListener' of null”

问题描述

我应该使用 JS 在网页上动态创建一个表格。我不能使用 .appendChild 我通过 JSLint 运行 JS 脚本，我得到“未使用的'createTable'。函数 createTable() {”（除了它不喜欢我的 r++ 和 c++ 表达式）。我测试我的代码的 Chrome 调试器说：“未捕获的 TypeError：无法读取属性 'addEventListener' of null”。非常感谢您指出错误所在的任何帮助。

我的简单代码：

function createTable() {
  var table = '';
  var r, c;
  var rowN = document.getElementById("rows").value;
  var colN = document.getElementById("columns").value;

  for (r = 1; r <= rowN; r++) {
    table += '<tr>';
    for (c = 1; c <= colN; c++) {
      table += '<td>' + c + '</td>';
    }
    table += '</tr>';
  }
  document.getElementByID('table').innerHTML = '<table border=1>' + table + '</table>';
}
document.getElementById("submit").addEventListener("onclick", createTable, false);
<!DOCTYPE html>
<html>    
<form>
  <fieldset>
    <label for="nRows">
           Select number of rows: 
       </label>
    <select id="rows" name="rows" tabindex="1">
      <option value="01">01</option>
      <option value="02">02</option>
      <option value="03">03</option>
      <option value="04">04</option>
      <option value="05">05</option>
      <option value="06">06</option>
      <option value="07">07</option>
      <option value="08">08</option>
      <option value="09">09</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
    </select>
    <label for="nColumns">
           Select number of columns: 
       </label>
    <select id="columns" name="columns" tabindex="3">
      <option value="01">01</option>
      <option value="02">02</option>
      <option value="03">03</option>
      <option value="04">04</option>
      <option value="05">05</option>
      <option value="06">06</option>
      <option value="07">07</option>
      <option value="08">08</option>
      <option value="09">09</option>
      <option value="10">10</option>
      <option value="11">11</option>
      <option value="12">12</option>
    </select>
  </fieldset>
  <input name="Submit1" tabindex="5" type="submit" value="Create Table" onclick="createTable()">
  <input name="Reset1" tabindex="7" type="reset" value="Clear values">    
</html>

标签： javascripthtml

解决方案

document.getElementById()当它找不到您要查找的元素时返回 null。我没有看到带有提交 ID 的元素。您可以将您的 html 更改为此

还删除了 onClick 属性，因为您正在使用 js 添加事件侦听器。

<!DOCTYPE html>
<html>
<form>
    <fieldset>
       <label for="nRows">
           Select number of rows: 
       </label>
           <select id="rows" name="rows" tabindex="1">
              <option value="01">01</option>
              <option value="02">02</option>
              <option value="03">03</option>
              <option value="04">04</option>
              <option value="05">05</option>
              <option value="06">06</option>
              <option value="07">07</option>
              <option value="08">08</option>
              <option value="09">09</option>
              <option value="10">10</option>
              <option value="11">11</option>
              <option value="12">12</option>
            </select>
       <label for="nColumns">
           Select number of columns: 
       </label>
           <select id="columns" name="columns" tabindex="3">
              <option value="01">01</option>
              <option value="02">02</option>
              <option value="03">03</option>
              <option value="04">04</option>
              <option value="05">05</option>
              <option value="06">06</option>
              <option value="07">07</option>
              <option value="08">08</option>
              <option value="09">09</option>
              <option value="10">10</option>
              <option value="11">11</option>
              <option value="12">12</option>
           </select>
    </fieldset>
<input id="submit" name="Submit1" tabindex="5" type="submit" value="Create Table" >
<input name="Reset1" tabindex="7" type="reset" value="Clear values">
</html>

其次，您的 for 循环不会运行，因为<s>rowN and colN variables are objects. It seems like you want the amount of children within those elements so this should work. </s>

抱歉，您的值以字符串形式返回，您想将它们解析为数字。

    function createTable() {
    var table = '';
    var r, c;
    var rowN = parseInt(document.getElementById("rows").value);
    var colN = parseInt(document.getElementById("columns").value);    

    for (r = 1; r <= rowN; r++)
    {
        table += '<tr>';
        for (c = 1; c <= colN; c++)
        {
            table += '<td>' + c + '</td>';
        }
        table += '</tr>';
    }    
    document.getElementByID('table').innerHTML = '<table border=1>' + table + '</table>';
}
document.getElementById("submit").addEventListener("onclick", createTable, false);

如果您仍然遇到相同的错误，请确保您的加载顺序是正确的。将您的脚本标签移动到正文的底部。

推荐阅读