Uncaught TypeError: Cannot set property 'innerHTML' of null error

Question

I got error of Uncaught TypeError: Cannot set property 'innerHTML' of null for below script. 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.

Below is the HTML and 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>

Possible duplicate of How to append data to div using JavaScript? — Michelangelo
– Michelangelo, Commented Feb 4, 2019 at 15:42

Maheer Ali · Accepted Answer · 2019-02-04 16:35:28Z

2

Actually document.write()and document.writeln() works in a different ways you think. It actually clears all the document in your case you you are getting null. See this
If you wanna add some element to your body you can use document.body.innerHTML += string.appendChild() can also be used but its not for 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>

edited Feb 4, 2019 at 16:35

answered Feb 4, 2019 at 15:47

Maheer Ali

36.5k8 gold badges53 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

danboh · Accepted Answer · 2019-02-04 15:35:32Z

0

I think there are several ways, but I would recommend looking at 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 );
          }
  }

answered Feb 4, 2019 at 15:35

danboh

7783 gold badges13 silver badges28 bronze badges

Comments

Davi · Accepted Answer · 2019-02-04 16:03:05Z

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. So don't use onclick=" ... " inside your HTML and instead add eventlisteners in your JS. 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. Because <input> elements return their value as a String, this is very likely to fail. Besides, you should use the type="number" attribute instead of type="text" on that element. 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.

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.

// ====== 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>

Collectives™ on Stack Overflow

Uncaught TypeError: Cannot set property 'innerHTML' of null error

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related