开发者问题收集

未捕获的类型错误：无法设置属性“innerHTML”为空错误

2019-02-04
1426
javascript html innerhtml

对于以下脚本，我收到错误 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>
3个回答

实际上 document.write() 和 document.writeln() 的工作方式与你想象的不同。 它实际上清除了你得到 null 的情况下的所有 document 。 查看此
如果你想向你的正文添加一些元素，你可以使用 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>
Maheer Ali
2019-02-04

我认为有几种方法，但我建议查看附加方法。类似下面的方法应该有效： 

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 );
          }
  }
danboh
2019-02-04

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

首先，您 应该 避免在 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>
Davi
2019-02-04