当我单击评论系统javascript而不是jquery上的回复按钮时，显示textarea或div（在要回复的评论下方）

Question

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.

Answer 1

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>