Anu Rajan Anu Rajan - 1 month ago 6
HTML Question

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

i am learning javascript, i am a newbie to programming in general. i am trying to make a simple comment post for learning purpose (like the pic)
picture sample

this is my code so far. 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 of the input box. ex: i write "i love this " in 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 of the input box. help!!



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>




Answer

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>

Comments