一个发布按钮，每次点击都会产生不同的结果（javascript）答案

【问题标题】：one Post button, each click gives different result (javascript)一个发布按钮，每次点击都会产生不同的结果（javascript）
【发布时间】：2016-10-16 02:19:47
【问题描述】：

我正在尝试为学习目的制作一个简单的评论帖子（如图片）

如何让发布按钮在每次点击时将评论发布到新的输入框。换句话说，每次我在文本区域写评论并单击发布按钮时，这些cmets中的每一个都应该进入每个输入框。

例如：我在文本区域写“我喜欢这个”并点击发布，该文字将显示在评论类（0）中。下一条评论“xyz”并点击post是去class(1)等。到目前为止我只知道如何显示到一个输入框。

到目前为止，这是我的代码：

function postcomment(){
  var x = document.getElementById("entercomment").innerHTML;
  document.getElementsByClassName("comment")[0].value = x;
}

body{
background-color: cyan;
}

#picgoeshere{
  border: 5px solid grey;
  height: 500px;
  width:900px;
   margin: 0 auto; 
}

#picture{
  height: 500px;
  width:900px;
}

#displaycomment{
   border: 3px solid grey; 
   height:250px;
   width:800px;
   margin: 0 auto;
   margin: top:50%;
} 

.comment{
 height: 41.5px;
 width: 800px;
 border: 0;
}

#typecomment{
   border: 3px solid grey; 
   height:100px;
   width:800px;
   margin: 0 auto;
}
#entercomment{
     height:100px;
     width:700px;
}

#submitbutton{
  
  border: 1px solid grey;
  background-color: green;
  height: 100px;
  width: 100.9px;
  position: absolute;
  top: ;
  left: 65.7%;
}

</!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="learnjs.css">
	<title></title>
</head>
<body>
<div id="everything">
  <div id="picgoeshere">
 	<img src="./images/bisping.jpg" id="picture">
  </div>

   <div id="displaycomment">
     <input type="text" class="comment"></br>
     <input type="text" class="comment"></br> 
     <input type="text" class="comment"></br> 
     <input type="text" class="comment"></br> 
     <input type="text" class="comment"></br> 
     <input type="text" class="comment"></br> 

   </div>

  <div id="typecomment">
  	<textarea rows="4" cols="50" id="entercomment" placeholder="Enter Your Comment Here"></textarea>
     <button id="submitbutton" onclick="postcomment()"> Post</button>
  </div>

</div>

<script src = "learn.js"></script>
</body>
</html>

【问题讨论】：

您使用输入元素显示评论的任何特殊原因？
不，我到目前为止所学到的。如果其他元素更好，那就太好了。但我确实只想使用 java 脚本

@AnuRajan 你想在邮箱中以

 标签的格式显示你的评论吗？？

标签： javascript html

【解决方案1】：

这应该对你有帮助！

function postcomment() {



  var x = document.getElementById("entercomment").value;
  document.getElementById("entercomment").value = ''
  const node = document.createElement("div")
  const deleteButton = document.createElement("span")
  node.innerHTML = x
  node.className = 'cmt'

  deleteButton.className = 'delete-button'
  deleteButton.innerHTML = 'delete'
  deleteButton.onclick = function(e) {
    e.target.parentNode.parentNode.removeChild(e.target.parentNode)
  }

  node.appendChild(deleteButton)
  const commentContainer = document.getElementById('displaycomment')
  commentContainer.appendChild(node)

}

body {
  background-color: cyan;
}
#picgoeshere {
  border: 5px solid grey;
  height: 500px;
  width: 900px;
  margin: 0 auto;
}
#picture {
  height: 500px;
  width: 900px;
}
#displaycomment {
  border: 3px solid grey;
  height: 250px;
  width: 800px;
  margin: 0 auto;
  margin: top: 50%;
}
.cmt {
  background: #000;
  color: #fff;
  border-radius: 4px;
  margin-top: 20px;
  padding: 15px;
}
.comment {
  height: 41.5px;
  width: 800px;
  border: 0;
}
#typecomment {
  border: 3px solid grey;
  height: 100px;
  width: 800px;
  margin: 0 auto;
}
#entercomment {
  height: 100px;
  width: 700px;
}
#submitbutton {
  border: 1px solid grey;
  background-color: green;
  height: 100px;
  width: 100.9px;
  position: absolute;
  top: ;
  left: 65.7%;
}
.delete-button {
  float: right;
  color: red;
  cursor: pointer;
}

</!DOCTYPE html>
<html>

<head>

  <link rel="stylesheet" type="text/css" href="learnjs.css">
  <title></title>
</head>

<body>
  <div id="everything">


    <div id="picgoeshere">

      <img src="./images/bisping.jpg" id="picture">
    </div>


    <div id="displaycomment">


    </div>

    <div id="typecomment">

      <textarea rows="4" cols="50" id="entercomment" placeholder="Enter Your Comment Here"></textarea>

      <button id="submitbutton" onclick="postcomment()">Post</button>

    </div>



  </div>


  <script src="learn.js"></script>

</body>

</html>

【讨论】：

哇，谢谢。我会开始学习这个。这是做我想做的更好的方法。我主要使用输入元素，因为它有一个删除（x）选项。有没有办法使用你的风格删除已发布的评论？
@AnuRajan 添加了删除功能。考虑批准答案！

【解决方案2】：

您可以创建一个计数器变量并使用它来引用每个注释元素，然后在每次调用该函数时加 1。例如：

var counter = 0;

function postcomment() {

  var x = document.getElementById("entercomment").value;

  document.getElementsByClassName("comment")[counter].value = x;
  
  counter++;

}

body {
  background-color: cyan;
}
#picgoeshere {
  border: 5px solid grey;
  height: 500px;
  width: 900px;
  margin: 0 auto;
}
#picture {
  height: 500px;
  width: 900px;
}
#displaycomment {
  border: 3px solid grey;
  height: 250px;
  width: 800px;
  margin: 0 auto;
  margin: top: 50%;
}
.comment {
  height: 41.5px;
  width: 800px;
  border: 0;
}
#typecomment {
  border: 3px solid grey;
  height: 100px;
  width: 800px;
  margin: 0 auto;
}
#entercomment {
  height: 100px;
  width: 700px;
}
#submitbutton {
  border: 1px solid grey;
  background-color: green;
  height: 100px;
  width: 100.9px;
  position: absolute;
  top: ;
  left: 65.7%;
}

</!DOCTYPE html>
<html>

<head>

  <link rel="stylesheet" type="text/css" href="learnjs.css">
  <title></title>
</head>

<body>
  <div id="everything">


    <div id="picgoeshere">

      <img src="./images/bisping.jpg" id="picture">
    </div>


    <div id="displaycomment">
      <input type="text" class="comment">
      <br>
      <input type="text" class="comment">
      <br>
      <input type="text" class="comment">
      <br>
      <input type="text" class="comment">
      <br>
      <input type="text" class="comment">
      <br>
      <input type="text" class="comment">
      <br>


    </div>

    <div id="typecomment">

      <textarea rows="4" cols="50" id="entercomment" placeholder="Enter Your Comment Here"></textarea>

      <button id="submitbutton" onclick="postcomment()">Post</button>

    </div>



  </div>


  <script src="learn.js"></script>

</body>

</html>

【讨论】：

@AnuRajan 没问题：D

【解决方案3】：

这是您要构建的小示例

function addNewComment() {
  var comment = document.getElementById('comment').value
  var comments = document.getElementById('comments');
  comments.innerHTML += comment + "<br>";
}

<p id=comments></p>
<input type="text" id="comment">
<input type="submit" onclick="addNewComment()" value="submit">

【讨论】：

【解决方案4】：

这是你可以做的。

当您拥有固定数量的 cmets 时，总是会很困难。一旦有人添加评论，我就可以将元素添加到显示部分的方式进行了更改。就像我做的那样，你可以添加任意数量的 cmets。

var commentId = 0;

function postcomment() {

  // Get the comment text
  var commentTextElement = document.querySelector("#entercomment")
  var x = commentTextElement.value;
  //Create a new element to display the comment and add the text content to it, you could use any element here. I just created a div for simple implementation
  var element = document.createElement("div");
  element.setAttribute("id", "comment-id-" + commentId)
  element.innerHTML = x;
  var deleteElement = document.createElement("button");
  deleteElement.innerHTML = "Delete";
  deleteElement.setAttribute("commentId", "comment-id-" + commentId);
  commentId++;
  deleteElement.className = "delete";
  element.appendChild(deleteElement);

  element.className = "posted-comment"
    // Clear the text to enable further comments.
  commentTextElement.value = "";

  // Append the new comment to the display section
  document.querySelector("#displaycomment").appendChild(element);
}

document.querySelector("#displaycomment").addEventListener("click", function(event) {

  if (event.target.tagName === "BUTTON") {

    var buttonElement = event.target;
    var commentId = buttonElement.getAttribute("commentId");
    document.querySelector("#" + commentId).remove();
  }
});

body {
  background-color: cyan;
}
#picgoeshere {
  border: 5px solid grey;
  height: 500px;
  width: 900px;
  margin: 0 auto;
}
#displaycomment {
  border: 3px solid grey;
  height: 250px;
  width: 400px;
  margin: 0 auto;
  margin: top: 50%;
}
.comment {
  height: 41.5px;
  width: 800px;
  border: 0;
}
#typecomment {
  border: 3px solid grey;
  height: 100px;
  width: 800px;
  margin: 0 auto;
}
#entercomment {
  height: 100px;
  width: 700px;
}
#submitbutton {
  border: 1px solid grey;
  background-color: green;
  height: 100px;
  width: 100.9px;
  position: absolute;
  top: ;
  left: 65.7%;
}
.posted-comment {
  margin: 10px;
  border: 1px solid #dedede;
}
.delete {
  float: right;
}

<div id="everything">

  <div id="displaycomment">
  </div>

  <div id="typecomment">
    <textarea rows="4" cols="50" id="entercomment" placeholder="Enter Your Comment Here"></textarea>
    <button id="submitbutton" onclick="postcomment()">Post</button>

  </div>
</div>

【讨论】：

。我将开始学习这个。这是做我想做的更好的方法。我使用输入元素主要是因为它有一个删除 (x) 选项。有没有办法使用你的风格删除已发布的评论？
刚刚添加了您也可以删除的方式。

【解决方案5】：

--使用pre标签维护发表的评论格式 --自动滚动显示评论框滚动cmets。 --使用随机ID来删除图片点击功能。

function postcomment() {

  document.getElementById("entercomment").focus();
  var comment = document.getElementById("entercomment").value;
  var randomId = Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5);
  document.getElementById("displaycomment").innerHTML += "<pre class='preClass' id ='" + randomId + "' />" + comment + "<img src='http://image.flaticon.com/icons/svg/54/54528.svg' onclick='removeComment(this.id);' id='" + randomId + "' class='preimg' /> </pre> ";
  document.getElementById("entercomment").value = "";

}

function removeComment(element) {
  var ele = document.getElementById(element);
  ele.parentElement.removeChild(ele);
}

body {
  background-color: cyan;
}
#picgoeshere {
  border: 5px solid grey;
  height: 500px;
  width: 900px;
  margin: 0 auto;
}
#picture {
  height: 500px;
  width: 900px;
}
#displaycomment {
  border: 3px solid grey;
  height: 250px;
  max-width: 800px;
  overflow: auto;
  margin: 0 auto;
  margin: top: 50%;
}
.comment {
  height: 41.5px;
  width: 800px;
  border: 0;
}
#typecomment {
  border: 3px solid grey;
  height: 100px;
  width: 800px;
  margin: 0 auto;
}
#entercomment {
  height: 100px;
  width: 700px;
}
#submitbutton {
  border: 1px solid grey;
  background-color: green;
  height: 100px;
  width: 100.9px;
  position: absolute;
  top: ;
  left: 65.7%;
}
.preClass {
  width: 100%;
  border-bottom: 1px dotted blue;
  position: relative;
}
.preimg {
  height: 15px;
  position: absolute;
  right: 0px;
  top: 0px;
}

<div id="everything">


  <div id="picgoeshere">

    <img src="http://cdn.wallpapersafari.com/43/53/Tx8wbO.jpg" id="picture">
  </div>


  <div id="displaycomment">
    <!--  <div id="comment"> </div>-->

  </div>

  <div id="typecomment">

    <textarea rows="4" cols="50" id="entercomment" placeholder="Enter Your Comment Here"></textarea>

    <button id="submitbutton" onclick="postcomment()">Post</button>

  </div>

【讨论】：