未捕获的 TypeError：无法设置 null 错误的属性“innerHTML”答案

【问题标题】：Uncaught TypeError: Cannot set property 'innerHTML' of null error未捕获的 TypeError：无法设置 null 错误的属性“innerHTML”
【发布时间】：2019-02-05 00:35:28
【问题描述】：

以下脚本出现Uncaught TypeError: Cannot set property 'innerHTML' of null 错误。我在正文之后添加了脚本标签。但我仍然得到错误。我想在 ID 为 showTextBoxes 的 div 内的同一页面中显示文本框。

下面是 HTML 和 JS。

function showArray(){
  var numofArr = document.getElementById("numofArr").value;
  for (let i = 0; i < numofArr; i++) {
    var a = document.writeln('<input type="text" name="Fname"><br/><br/>');
    document.getElementById('showTextBoxes').innerHTML = a;
  }
  document.writeln('<input type="submit" name="submit">');
}

<p>Number of arrays(array within 0-9)</p>
<input type="text" id="numofArr" pattern="[0-9]">
<input type="submit" onclick="showArray()" value="Submit"><br><br>
<div id="showTextBoxes"></div>

【问题讨论】：

你不能这样使用document.writeln。
我应该如何纠正这个问题
How to append data to div using JavaScript?的可能重复

标签： javascript html innerhtml

【解决方案1】：

实际上document.write()和document.writeln()的工作方式与您的想法不同。它实际上清除了所有document，在你得到null的情况下。 See this
如果你想为你的身体添加一些元素，你可以使用document.body.innerHTML += string.appendChild()，但它不适用于stings

function showArray(){
      var numofArr = parseInt(document.getElementById("numofArr").value);
           for (let i = 0; i < numofArr; i++) {
            var a = '<input type="text" name="Fname" /><br/><br/>'
            document.getElementById('showTextBoxes').innerHTML += a;
          }
      document.body.innerHTML += '<input type="submit" name="submit"/>'
}

<body>
   <p>Number of arrays(array within 0-9)</p>
   <input type="text" id="numofArr" pattern="[0-9]">
<input type="submit" onclick="showArray()" value="Submit"><br><br>

 <div id="showTextBoxes"></div>

【讨论】：

【解决方案2】：

我认为有几种方法，但我建议查看 append。像这样的东西应该可以工作：

function showArray(){
      var numofArr = document.getElementById("numofArr").value;
           for (let i = 0; i < numofArr; i++) {
              var textBox = document.createElement("input");
              var enter = document.createElement("br");
              document.getElementById('showTextBoxes').append( textBox );
              document.getElementById('showTextBoxes').append( enter );
          }
  }

【讨论】：

【解决方案3】：

脚本中有很多地方会阻止它正常运行。我将一步一步地解决它们，以便您可以跟进。

首先，您应该避免在 HTML 中使用内联事件处理程序，原因与您应该避免内联样式声明的原因相同。所以不要在你的 HTML 中使用onclick=" ... "，而是在你的 JS 中添加事件监听器。这也使您能够取消默认行为或停止事件传播等。

接下来，您尝试使用numofArr 输入的value 作为循环的上限，而不将其转换为Number。因为<input> 元素将它们的值作为String 返回，所以这很可能会失败。此外，您应该在该元素上使用type="number" 属性而不是type="text"。这样做不是必需，只是很好的衡量标准。

好的，现在是 showArray 函数：不要使用document.writeln（或document.write），而是使用document.createElement 创建元素并使用appendChild 将它们添加到DOM。

您可以在下面看到一个工作示例。不要被byId 和makeEl 函数所迷惑，它们只是实用程序，所以你不必一直写document.getElementById 和document.createElement。

// ====== UTILITY FUNCTIONS ======
function byId (id, root = document) {
  return root.getElementById(id);
}

function makeEl (tag) {
  return document.createElement(tag);
}


// ====== PROGRAM STUFF ======
function showArray (e) {
  e.preventDefault();

  let numofArr = parseInt(byId('numofArr').value, 10);
  let output = byId('showTextBoxes');

  for (let i = 0; i < numofArr; i++) {
    let textIn = makeEl('input');
    textIn.type = 'text';
    textIn.name = 'Fname';
    
    output.appendChild(textIn);
    output.appendChild(makeEl('br'));
    output.appendChild(makeEl('br'));
  }

  let submit2 = makeEl('input');
  submit2.type = 'submit';
  submit2.value = 'Submit';
  document.body.appendChild(submit2);
}

byId('submit1').addEventListener('click', showArray, false);

<p>Number of arrays(array within 0-9)</p>
<input type="number" id="numofArr">
<input id="submit1" type="submit" value="Submit"><br><br>
<div id="showTextBoxes"></div>

【讨论】：