javascript - onchange 第一次会运行一个函数来创建 html 元素，但第二次不会这样做

Question

我正在尝试用 javascript 制作一个聊天程序，在有人输入第一个问题的答案之前不会显示下一个问题。

此功能可以显示第一个问题(“第一段”)，然后显示第二个问题(“第二段”)，但第三次就不起作用了。

我不断收到错误:

"Uncaught TypeError: Cannot set property 'onchange' of null."

我已经尝试使用 onkeyup 和 jquery 的 .keyup() 函数，但它给了我同样的错误。当我使用调试器查看生成的html时，它显示第二段，所以我不明白为什么计算机说它是空的。

我该如何解决这个问题？

<div id = "div1">

</div>

<script>

   function setElement(text, id, id2){
   var para = document.createElement("p");
   var node = document.createTextNode(text);
   para.appendChild(node);
   var element = document.getElementById("div1");
   element.appendChild(para);
   para.id = id;
   var inputBox = document.createElement("input");
   element.appendChild(inputBox);
   inputBox.id = id2;
   }

   setElement("This is paragraph one.", "p1", "i1");

   document.getElementById("i1").onchange = function(){setElement("This     is paragraph two.", "p2", "i2")};

   document.getElementById("i2").onchange = function(){setElement("This is paragraph three.", "p3", "i3")};

   //Uncaught TypeError: Cannot set property 'onchange' of null
</script>

Answer 1

document.getElementById("i2").onchange = function(){setElement("This is paragraph three.", "p3", "i3")};

当 JavaScript 运行时该元素不存在，因此会抛出错误。创建新元素后，您需要运行这行代码。

function setElement(pnum){
   var para = document.createElement("p");
   var node = document.createTextNode("this is paragraph " + pnum + ".");
   para.appendChild(node);
   var element = document.getElementById("div1");
   element.appendChild(para);
   para.id = "p" + pnum;
   var inputBox = document.createElement("input");
   element.appendChild(inputBox);
   inputBox.id = "i" + pnum;
         pnum++;
   inputBox.onchange = function(){setElement(pnum)};
}
setElement(1);

上述更改将继续创建段落和输入字段。