Fatal编程技术网
  • javascript/
  • Javascript 使用document.getElementByID访问动态生成的DIV

Javascript 使用document.getElementByID访问动态生成的DIV

javascript html forms

Javascript 使用document.getElementByID访问动态生成的DIV,javascript,html,forms,interactive,Javascript,Html,Forms,Interactive,我试图使用document.getElementById访问动态生成的DIV，但getting无法将innerHTML属性设置为null，这一点非常明显 基本上，我试图建立一种互动形式，就像 我想为每个问题创建单独的DIV 以下是我迄今为止所做的工作： index.html <!DOCTYPE html> <html> <head> <title>Interactive Forms</title> <scrip

我试图使用document.getElementById访问动态生成的DIV，但getting无法将innerHTML属性设置为null，这一点非常明显

基本上，我试图建立一种互动形式，就像

我想为每个问题创建单独的DIV

以下是我迄今为止所做的工作：

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";
  }
}

var问题=[
“嘿，你叫什么名字？”，
“我可以知道您的电子邮件ID吗？”，
“您还想订阅时事通讯吗？”
];
var html=“”；
var i=0；
addEventListener（“向下键”，函数（事件）{
if（event.keyCode==13）{
问题（）；
}
if（event.code==39）{
nextQuestion（）；
}
});
函数问题（）{
html=问题[0]+“
”+“确定”或点击右箭头
”；
document.body.innerHTML=html；
//document.getElementById（“playArea”）.innerHTML=html；
i++；
}
函数nextQuestion（）{

如果（i
document.getElementById
通过其ID从文档中获取元素


您尚未将div添加到文档中，因此无法找到它



也就是说，您已经拥有该元素了！无需在文档或其他任何地方搜索它


newDiv.innerHTML = html2;



document.getElementById
通过其ID从文档中获取元素


您尚未将div添加到文档中，因此无法找到它



也就是说，您已经拥有该元素了！无需在文档或其他任何地方搜索它


newDiv.innerHTML = html2;



是的，问题已经解决了，但是新的问题没有出现。你也可以研究一下吗>“你还没有将div添加到文档中”怎么做？我不明白。你设法弄明白了
createElement
，有一些例子。我设法使它工作，但代码以一种不寻常的方式工作。我现在正在使用document.body.insertBefore。再次编辑代码供你查看。请查看编辑历史记录。是的，问题已经解决，但新问题仍然存在没有弹出。您也可以查看一下吗>“您还没有将div添加到文档中”如何做到这一点？我不明白。您设法找到了
createElement
，其中有一些示例。我设法使其工作，但代码以一种不寻常的方式工作。我现在使用document.body.insertBefore。再次编辑代码供您查看。请查看编辑历史记录。