使用 JS 将表单输出写入生成的 div？

Question

基本上，您在第一个文本区域表单中键入内容，单击 post，下面会生成一个带有序列号的 div。评论框中的文本应该打印在生成的 div 中，但为了功能起见，现在输出到第二个文本区域。我在将文本输出到新 div 元素时遇到问题。我已经尝试使用 innerHTML 在每个新的 div 上创建一个新的文本区域，但文本输出不会使用新的 div 元素生成。我还尝试将 post 文本附加到左侧的 post 数字，但它再次无法生成。如果有帮助，我会在 board/chan 论坛发帖。提前致谢

function addtext() {
   var newtext = document.myform.inputtext.value;
   document.myform.outputtext.value += newtext;
}

function addElement() {

   var ni = document.getElementById('myDiv');

   var numi = document.getElementById('theValue');

   var num = (document.getElementById('theValue').value - 1) + 2;

   numi.value = num;

   var newdiv = document.createElement('div');

   var divIdName = 'Post#' + num;

   newdiv.setAttribute('id', divIdName);

   newdiv.innerHTML = (divIdName) + "";
   ni.appendChild(newdiv);
}

#LL {
   position: relative
}

div {
   display: block;
   color: black;
   border-radius: 19px;
   background: linear-gradient(white, teal, black);
   padding: 20px;
   width: 1440px;
   height: 100px;
   border: 10px solid #fff;
}

#fs {
   border-radius: 12px;
   background: linear-gradient(white, teal, white);
   ;
}

.clearfix {
   overflow: auto;
}

#textbox {
   height: 100px;
   width: 1440px;
   border-radius: 10px;
   background: ;
}

#post {
   border-radius: 15px;
   position: relative;
   left: 1340px;
   color: black;
}

<body>
   <header>
      <script>
         </script>
   </header>
<fieldset id="fs">
   <input type="hidden" value="0" id="theValue" />
   <legend id=LL>▼
   </legend>
   <form name="myform">
      <textarea id="textbox" type="text" size="50" name="inputtext" />
      </textarea>
      <button id="post" onClick="addtext()">
         <a value="Add New Text" href="javascript:;" onclick="addElement()">
      Post Comment
   </a>
      </button>
</fieldset>

<div id="myDiv">
   <textarea name=outputtext></textarea>
</div>
</form>
<p>TEXT ENTRY DOESN'T WORK YET</p>
</body>

Answer 1

您永远不会将 textarea 值放入新创建的 div 中。你在 addElement() 函数中有这个。只需简单地输入 div id 您正在创建的名称

newdiv.innerHTML = (divIdName) + "";

如果你想在 div 里面的文本区域内容使用这个

newdiv.innerHTML = (divIdName) + document.myform.inputtext.value;

function addtext() {
   var newtext = document.myform.inputtext.value;
   document.myform.outputtext.value += newtext;
}

function addElement() {

   var ni = document.getElementById('myDiv');

   var numi = document.getElementById('theValue');

   var num = (document.getElementById('theValue').value - 1) + 2;

   numi.value = num;

   var newdiv = document.createElement('div');

   var divIdName = 'Post#' + num;

   newdiv.setAttribute('id', divIdName);

   newdiv.innerHTML = (divIdName) + document.myform.inputtext.value;
  
   ni.appendChild(newdiv);
}

#LL {
   position: relative
}

div {
   display: block;
   color: black;
   border-radius: 19px;
   background: linear-gradient(white, teal, black);
   padding: 20px;
   width: 1440px;
   height: 100px;
   border: 10px solid #fff;
}

#fs {
   border-radius: 12px;
   background: linear-gradient(white, teal, white);
   ;
}

.clearfix {
   overflow: auto;
}

#textbox {
   height: 100px;
   width: 1440px;
   border-radius: 10px;
   background: ;
}

#post {
   border-radius: 15px;
   position: relative;
   left: 1340px;
   color: black;
}

<body>
   <header>
      <script>
         </script>
   </header>
<fieldset id="fs">
   <input type="hidden" value="0" id="theValue" />
   <legend id=LL>▼
   </legend>
   <form name="myform">
      <textarea id="textbox" type="text" size="50" name="inputtext" />
      </textarea>
      <button id="post" onClick="addtext()">
         <a value="Add New Text" href="javascript:;" onclick="addElement()">
      Post Comment
   </a>
      </button>
</fieldset>

<div id="myDiv">
   <textarea name=outputtext></textarea>
</div>
</form>
<p>TEXT ENTRY DOESN'T WORK YET</p>
</body>

您还应该尝试从任何页面中删除水平滚动条。网站上的水平滚动不被认为是用户友好的，因为用户必须将其拖动到屏幕上（通常鼠标滚动不控制水平滚动）

使用 JS 将表单输出写入生成的 div？

Form output written to generated divs using JS?

javascript

forms

forum

messageboard