Question

我试图在javascript中创建一个聊天程序，直到有人为第一个问题键入答案时才会显示下一个问题。

此功能用于显示第一个问题（＆＃34;第一段＆＃34;）然后显示第二个问题（＆＃34;第二段＆＃34;），但它不会显示第三个问题时间。

我一直收到错误：

＆＃34;未捕获的TypeError：无法设置属性＆＃39; onchange＆＃39; null。＆＃34;

我已经使用onkeyup和jquery＆＃39; .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);

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

Answer 2

我不确定你实际上要用这个来实现什么，但这里是一个模拟聊天应用程序，它完全在浏览器窗口中的前端javascript中运行。

function setElement(caller){
   var outputs = document.getElementsByClassName("output");
   Array.prototype.forEach.call(outputs, function(o) {
     o.appendChild(makePara(caller, o));
     o.scrollTop = o.scrollHeight;
   });
   caller.value = "";
}
function makePara(caller, o) {
   var para = document.createElement("p");
   var node = document.createTextNode(caller.value);
   para.appendChild(node);
 	 if (o.parentElement != caller.parentElement.parentElement) {
     para.style.textAlign = "right";
     para.style.backgroundColor  = "#ffeeee";
   } else {
     para.style.textAlign = "left";
     para.style.backgroundColor  = "#eeffee";
   }
   return para;
}

var inputBox1 = document.getElementById("input1");
var inputBox2 = document.getElementById("input2");
inputBox1.onchange = function(){setElement(this)};
inputBox2.onchange = function(){setElement(this)};

.chat { 
  display: inline-block;
  width: 200px;
  padding: 20px;
  border: 1px solid black;
  }

.output {
  width: 200px;
  height: 200px;
  overflow-y: scroll;
  overflow-x: wrap;
}

<div id="div1" class="chat">
  <h4>Chat window 1</h4>
  <div id="txt1" class="output"></div>
  <div id="inpt1">
    <input type='text' id="input1" />
  </div>
</div>
<div id="div2" class="chat">
  <h4>Chat window 2</h4>
  <div id="txt2" class="output"></div>
  <div id="inpt2">
    <input type='text' id="input2" />
  </div>
</div>

Answer 3

感谢Momus和https://www.w3schools.com/css/tryit.asp?filename=trycss_display_js，这是我最终的结果。还要感谢所有不断告诉我元素尚未存在的人。我决定先让它们存在，然后使用javascript来显示它们。

<div id = "div1">

<p id = "p1" style = "display:none;">Hi, I'm RiddleBot. What is your name?</p>
<input id = "i1" type = "text" style = "display:none;">
<p id = "p2" style = "display: none;">Hi. What do you like to do?</p>
<input id = "i2" type = "text" style = "display:none;">
<p id = "p3" style = "display: none;">I like to tell riddles. Do you want to hear one?</p>
<input id = "i3" type = "text" style = "display:none;">
<p id = "p4" style = "display: none;">In marble walls as white as...</p>
<input id = "i4" type = "text" style = "display:none">

</div>

<script>


 function showElement(pnum){
 var inputBox = document.getElementById("i" + pnum);
 document.getElementById("p" + pnum).style.display = "block";
 document.getElementById("i" + pnum).style.display = "block";
 pnum++;
 inputBox.onchange = function () {showElement(pnum)};
 }

 showElement(1);

 </script>

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

3 个答案: