0

基本上，您在第一个文本区域表单中输入一些内容，单击 post 并在下面生成一个带有序列号的 div。注释框中的文本应该在生成的 div 内打印，但现在为了功能输出到第二个文本区域。我在将文本输出到新的 div 元素时遇到问题。我尝试使用 innerHTML 在每个新 div 上创建一个新的文本区域，但文本输出不会使用新的 div 元素生成。我也尝试将帖子文本附加到左侧的帖子编号，但它再次无法生成。如果有帮助，我正在制作一个留言板/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>

4

1 回答 1

0

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

newdiv.innerHTML = (divIdName) + "";

如果您想在该 div 中使用 textarea 内容，请使用此

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>

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

于 2015-11-29T08:23:32.630 回答