未捕获的TypeError：无法设置null错误的属性'innerHTML'
[英]Uncaught TypeError: Cannot set property 'innerHTML' of null error
问题描述
I got error of Uncaught TypeError: Cannot set property 'innerHTML' of null for below script. 
我收到了Uncaught TypeError: Cannot set property 'innerHTML' of null错误Uncaught TypeError: Cannot set property 'innerHTML' of null为以下脚本Uncaught TypeError: Cannot set property 'innerHTML' of null 。 I added the script tags after the body. 我在正文后面添加了脚本标签。 But still I get the error. 但是我仍然得到错误。 I want to show the text boxes in the same page within the div with the ID showTextBoxes . 我想在ID为showTextBoxes的div中的同一页面中显示文本框。
Below is the HTML and JS. 以下是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 个解决方案
解决方案1
2 2019-02-04 15:47:55
Actually document.write() and document.writeln() works in a different ways you think. 实际上， document.write()和document.writeln()工作方式与您认为的不同。 It actually clears all the document in your case you you are getting null . 实际上，如果您是null它将清除所有document 。 See this 看到这个
If you wanna add some element to your body you can use document.body.innerHTML += string . 如果您想添加一些元素到您的身体，可以使用document.body.innerHTML += string 。 appendChild() can also be used but its not for stings 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
0 2019-02-04 15:35:32
I think there are several ways, but I would recommend looking at append. 我认为有几种方法，但是我建议您查看append。 Something like this should work: 这样的事情应该起作用：
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
0 2019-02-04 16:03:05
There are various places in your script which prevent it from running correctly. 脚本中有很多地方会导致脚本无法正常运行。 I'll address them step by step so you can follow along. 我将逐步解决这些问题，以便您可以继续。
First of all, you should avoid inline event handlers in your HTML for the same reasons you should avoid inline style declarations. 首先，你应该避免内联事件处理程序在你的HTML出于同样的原因，你应该避免内联样式声明。 So don't use onclick=" ... " inside your HTML and instead add eventlisteners in your JS. 因此，请勿在HTML内使用onclick=" ... " ，而应在JS中添加eventlistener。 This also gives you the ability to cancel the default behaviour or stop event propagation and such things. 这还使您能够取消默认行为或停止事件传播等。
Next thing is, you try to use the value of your numofArr input as upper bounds for your loop without casting it to a Number . 接下来的事情是，您尝试将numofArr输入的value用作循环的上限，而不将其强制转换为Number 。 Because <input> elements return their value as a String , this is very likely to fail. 由于<input>元素以String返回其值，因此很有可能失败。 Besides, you should use the type="number" attribute instead of type="text" on that element. 此外，您应该在该元素上使用type="number"属性而不是type="text" 。 It's not required to do so, but just good measure. 不需要这样做，但这只是一个很好的措施。
OK, now for the showArray function: Instead of using document.writeln (or document.write ), create elements with document.createElement and add them to the DOM with appendChild . 好了，现在的showArray功能：不要使用document.writeln （或document.write ），创建元素document.createElement并将其添加到与DOM appendChild 。
You can see a working example below. 您可以在下面看到一个有效的示例。 Don't be confused by the byId and makeEl functions, they are just utilities so you don't have to write document.getElementById and document.createElement all the time. 不要被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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.