一个Post按钮，每次点击都会得到不同的结果（javascript）

时间：2016-10-16 02:19:47

标签： javascript html

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

enter image description here

每次单击时，如何使帖子按钮将评论发布到新输入框。换句话说，每次我在文本区域中编写注释并单击“发布”按钮时，每个注释都应该转到每个输入框。

前：我写了＃34;我喜欢这个＆＃34;在文本区域并单击post，该写入将显示在注释类（0）中。下一个评论＆＃34; xyz＆＃34;然后点击帖子去上课（1）等。到目前为止，我只知道如何显示到一个输入框。

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

＆＃13;
＆＃13; 
function postcomment(){
  var x = document.getElementById("entercomment").innerHTML;
  document.getElementsByClassName("comment")[0].value = x;
}
＆＃13; 
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%;
}
＆＃13; 
</!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>
＆＃13;
＆＃13;
＆＃13;

5 个答案:

答案 0 :(得分：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>

答案 1 :(得分：0)

这是你可以做的事情。

当你有一定数量的评论时，总是很难。一旦有人添加评论，我就改变了向显示部分添加元素的方式。我这样做，你可以添加任意数量的评论。

＆＃13;
＆＃13; 
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();
  }
});
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

这是你想要建立什么的小例子

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

答案 3 :(得分：0)

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

＆＃13;
＆＃13; 
var counter = 0;

function postcomment() {

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

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

}
＆＃13; 
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%;
}
＆＃13; 
</!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>
＆＃13;
＆＃13;
＆＃13;

答案 4 :(得分：0)

- 使用pre标签维护发布的评论格式 - 自动滚动显示注释框以滚动注释。 - 使用随机ID删除图像点击功能。

＆＃13;
＆＃13; 
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);
}
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题