Question

我尝试创建多个文本输入，将更新直播到另一个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>

这是我的javascript：

var inputBox = document.getElementById("chatinput");
inputBox.onkeyup = function() {
document.getElementById("printchatbox").innerHTML = inputBox.value;
};

and here is a demo

Answer 1

试试这个，

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

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

<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>

问题是，你总是使用相同的id来获取始终获取元素第一次出现的元素。

Answer 2

试试这个，给同样的id永远不会工作

HTML

<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>

CSS

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

JS

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

https://codepen.io/djmayank/pen/RZozPX

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

2 个答案: