Accessing dynamically generated DIV using document.getElementByID

Question

I am trying to access a dynamically generated DIV using document.getElementById but getting cannot set property innerHTML of null and that's pretty obvious.

Basically I am trying to build a type of interactive form just like https://www.typeform.com/

I want to create seperated DIV's for each question.

Here is what I have done so far:

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Interactive Forms</title>
    <script src="script.js"></script>
  </head>
  <body>
    <center>
      <div id="playArea">
          <h3>Hello Stranger! Let's start</h3> <br/>
          <button id="start" onclick="Questions()">Let's start</button><span>or Hit Enter</span>
      </div>
    </center>
  </body>
</html>

script.js

    var questions = [
    "Hey, what's you name?",
    "Can I know your E-mail ID please?",
    "Would you also like to subscribe to the newsletter?"
];
var html = "";
var i =0;
addEventListener("keydown", function(event){
  if(event.keyCode==13){
    Question();
  }
  if(event.code==39){
    nextQuestion();
  }
});
function Question(){
    html = questions[0]+"<br>"+"<input type='text' class='answer'><button onclick='nextQuestion()'>Ok</button><span>or Hit Right Arrow</span><br>";
    document.body.innerHTML = html;
    // document.getElementById("playArea").innerHTML = html;
    i++;
}
function nextQuestion(){
  if(i<questions.length){
    var html2 = "";
    newDiv = document.createElement("div");
    check="'answer"+i+"'";
    console.log("'answer"+i+"'");
    newDiv.setAttribute("id", "'answer"+i+"'");
    console.log(newDiv.id);
    html2 = questions[i]+"<br><input type='text' id='answer'><button onclick='nextQuestion()'>Ok</button><span>or Hit Right Arrow</span><br>";
    newDiv.innerHTML = html2;
    oQ = document.getElementById("otherQuestions");
    document.body.insertBefore(newDiv, oQ);
    i++;
}
  else{
  document.body.innerHTML = "Thank you for the response";
  }
}

score 2 · Accepted Answer · answered Feb 14 '18 at 10:25

2

document.getElementById gets an element, by its ID, from the document.

You haven't added the div to the document yet, so it can't be found.

That said you already have the element! There's no need to search for it, in the document or anywhere else.

newDiv.innerHTML = html2;

answered Feb 14 '18 at 10:25

Quentin

914,110
126
1,211
1,335

Yeah, the issue is resolved but the new questiosn are not popping up. Can you look into that too> – s4tr2 Feb 14 '18 at 10:35
"You haven't added the div to the document yet" – Quentin Feb 14 '18 at 10:36
How to do that? I am not getting it. – s4tr2 Feb 14 '18 at 16:15
You managed to figure out `createElement`, the [MDN documentation for createElement](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement) has examples. – Quentin Feb 14 '18 at 16:16
I managed to make it work but the code is working in an unusual manner. I am now using document.body.insertBefore. Editing the code once again for you to see. Please see the edit history. – s4tr2 Feb 14 '18 at 17:21

Accessing dynamically generated DIV using document.getElementByID

1 Answers1