Javascript 实时更新到另一个div的多个输入

我正在尝试创建多个文本输入，这些文本输入会实时更新到另一个div中。第一个输入/div对可以工作，但下两个不行

这是我的html：

<div id="document">
 <div id="listItem">
  <div class='printchatbox' id='printchatbox'></div>
   <div class='printchatbox' id='printchatbox'></div>
   <div class='printchatbox' id='printchatbox'></div>
 </div>
 <div id="editorWrapper">
  <input type='text' name='fname' class='chatinput' id='chatinput'>
  <input type='text' name='fname' class='chatinput' id='chatinput'>
  <input type='text' name='fname' class='chatinput' id='chatinput'>
 </div>
</div>

试试这个

var-inputBox1=document.getElementById（“chatinput1”）；
inputBox1.onkeyup=函数（）{
document.getElementById（“printchatbox1”）.innerHTML=inputBox1.value；
};
var inputBox2=document.getElementById（“chatinput2”）；
inputBox2.onkeyup=函数（）{
document.getElementById（“printchatbox2”）.innerHTML=inputBox2.value；
};
var inputBox3=document.getElementById（“chatinput3”）；
inputBox3.onkeyup=函数（）{
document.getElementById（“printchatbox3”）.innerHTML=inputBox3.value；
};
正文{
背景：#eee；
}
#文件{
背景：#fff；
盒影：0px 0px 2px 2px rgba（0,0,0,0.1）；
填充：30px0；
宽度：70%；
最大宽度：850px；
保证金：0自动；
边缘顶部：100px；
}
.printchatbox{
边框宽度：厚10px；
边框样式：实心；
背景色：#fff；
线高：2；
颜色：#6E6A6B；
字号：14pt；
文本对齐：左对齐；
浮动：中间；
边框宽度：0 1px 0；
边框颜色：#ddd；
宽度：40%；
高度：44px；
}
.printchatbox2{
边框宽度：厚10px；
边框样式：实心；
背景色：#fff；
线高：2；
颜色：#6E6A6B；
字号：14pt；
文本对齐：左对齐；
浮动：中间；
边框宽度：0 1px 0；
边框颜色：#ddd；
宽度：40%；
高度：44px；
}
#列表项{
填充：30px；
}
#编辑器包装器{
背景：#444；
填充：30px；
}
输入[类型=文本]{
宽度：100%；
填充：12px 20px；
利润率：8px0；
显示：内联块；
边框：1px实心#555；
边界半径：4px；
框大小：边框框；
背景:#555；
}
输入[类型=文本]：焦点{
大纲：无；
边框：1px实心#aaa；
背景：#777；
}
试试看，给同一个id是行不通的

HTML

JS

您不应使用同一字符串的多个元素ID。使用不同的ID或使用类并调用
document.getElementsByTagName（）
，尝试提供不同的ID。哇！谢谢大家！！这是我的第一个积压问题，你们回答得太快了！
var inputBox = document.getElementById("chatinput");
inputBox.onkeyup = function() {
document.getElementById("printchatbox").innerHTML = inputBox.value;
};

<div id="document">
  <div id="listItem">
    <div class='printchatbox' id='printchatbox1'></div>
    <div class='printchatbox' id='printchatbox2'></div>
    <div class='printchatbox' id='printchatbox3'></div>
  </div>
  <div id="editorWrapper">
    <input type='text' name='fname' class='chatinput' id='chatinput1'>
    <input type='text' name='fname' class='chatinput' id='chatinput2'>
    <input type='text' name='fname' class='chatinput' id='chatinput3'>
  </div>
</div>

    body {
  background: #eee;
}

#document {
  background: #fff;
  box-shadow: 0px 0px 2px 2px rgba(0,0,0,0.1);
  padding: 30px 0;
  width: 70%;
  max-width: 850px;
  margin: 0 auto;
  margin-top: 100px;
}

.printchatbox {
  border-width: thick 10px;
  border-style: solid;
  background-color: #fff;
  line-height: 2;
  color: #6E6A6B;
  font-size: 14pt;
  text-align: left;
  float: middle;
  border-width: 0 0 1px 0;
  border-color: #ddd;
  width: 40%;
  height: 44px;

}

.printchatbox2 {
  border-width: thick 10px;
  border-style: solid;
  background-color: #fff;
  line-height: 2;
  color: #6E6A6B;
  font-size: 14pt;
  text-align: left;
  float: middle;
  border-width: 0 0 1px 0;
  border-color: #ddd;
  width: 40%;
  height: 44px;

}

#listItem {
  padding: 30px;
}

#editorWrapper {
  background: #444;
  padding: 30px;

}

input[type=text] {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #555;
    border-radius: 4px;
    box-sizing: border-box;
  background: #555;
}

input[type=text]:focus {
  outline: none;
  border: 1px solid #aaa;
  background: #777;
}

var inputBox1 = document.getElementById("chatinput1");

inputBox1.onkeyup = function() {
  document.getElementById("printchatbox1").innerHTML = inputBox1.value;
};

var inputBox2 = document.getElementById("chatinput2");

inputBox2.onkeyup = function() {
  document.getElementById("printchatbox2").innerHTML = inputBox2.value;
};
var inputBox3 = document.getElementById("chatinput3");

inputBox3.onkeyup = function() {
  document.getElementById("printchatbox3").innerHTML = inputBox3.value;
};