CODEWITHSUNDEEP
javascripthtml
jsPlayer
jsPlayer

Reputation: 1245

one Post button, each click gives different result (javascript)

I am trying to make a simple comment post for learning purpose (like the pic)

enter image description here

How do I make the post button post the comment to new input box every time I click. In other words, every time I write a comment in text area and click post button, each of these comments should go to each input box.

ex: I write "i love this" in the text area and click post, that writing is going to display in comment class(0). The next comment "xyz" and click post is going to class(1) etc. So far I only know how to display to one input box.

Here is my code so far:

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>

Upvotes: 1

Views: 361

Answers (5)

monikapatelIT
monikapatelIT

Reputation: 1007

--Use pre tag to maintain posted comment format --Auto scroll display comment box to scroll comments. --use random Id to remove on image click function.

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>

Upvotes: 0

Sreekanth
Sreekanth

Reputation: 3130

This is something you could do.

It is always going to be difficult when you have a fixed number of comments. I did a change in the way you could add elements to the display section once someone add a comment. The way I did, you could add any number of comments. 

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>

Upvotes: 0

Pranesh Ravi
Pranesh Ravi

Reputation: 19113

This should help you!

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>

Upvotes: 1

Rohan Rao
Rohan Rao

Reputation: 112

You could make a counter variable and use it to reference each of the comment elements, then add 1 each time the function is called. For example:

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>

Upvotes: 0

solimanware
solimanware

Reputation: 3051

here's small example of what you want to build

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

Upvotes: 0

Related Questions