CODEWITHSUNDEEP
javascriptphpcommentssystem
user5232146
user5232146

Reputation:

Show textarea or div (just below the comment to reply),when i click reply button on comment system javascript not jquery

So i am trying to make a comment system in my new site.All the comments have a reply button with id 'replybtn' which, onclick i want to show a textarea or input field inside a div with id 'replyform' right below the respective comment. And i am using php,mysql to retrieve comments.

<div class='cmt'>
    <div class='cmttext'></div>
    <div id='replybtn'></div>
    <div id='replyform'>
       <form method='post' ..... >
          <textarea name='reply' ></textarea>
          <input type='submit' />
       </form>
    </div>
</div>

Thank you. This is my first question asked on stackoverflow, so sorry if i have not given sufficient information.

Upvotes: 0

Views: 1247

Answers (1)

lv0gun9
lv0gun9

Reputation: 621

Try this. It is plain JavaScript. Modify below what you want. :) I updated it.

var varHtml = "<form method='post' ..... ><textarea name='reply' ></textarea> <input type='submit' /> </form>";


var allElements = document.body.getElementsByClassName("replybtn");

var addCommentField = function() {
  for (var i = 0; allElements.length > i; i++) {
    if (allElements[i] === this) {
      console.log("this " + i);

      if (document.getElementsByClassName("replyform")[i].innerHTML.length === 0) {
        document.getElementsByClassName("replyform")[i].innerHTML = varHtml;
      }

    }
  }
};


for (var i = 0; i < allElements.length; i++) {
  allElements[i].addEventListener('click', addCommentField, false);
}
<div class='cmt'>
  <div class='cmttext'></div>
  <button class='replybtn'>replybtn</button>
  <div class='replyform'></div>
</div>
<div class='cmt'>
  <div class='cmttext'></div>
  <button class='replybtn'>replybtn</button>
  <div class='replyform'></div>
</div>
<div class='cmt'>
  <div class='cmttext'></div>
  <button class='replybtn'>replybtn</button>
  <div class='replyform'></div>
</div>

Upvotes: 1

Related Questions