Question

以下脚本出现了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>

Answer 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>

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

Answer 3

您的脚本中有很多地方妨碍其正常运行。我将逐步解决这些问题，以便您可以继续。

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

接下来的事情是，您尝试将value输入的numofArr用作循环的上限，而不将其强制转换为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>

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

3 个答案: