Javascript onClick事件仅一次？

Question

I'm trying to implement a comment system. Now I have a problem regarding JS and an onClick function. First the code:

<ul class="comments">
            <li>
                <div class="comment">
                    <div class="img-thumbnail" style="margin-left: -98px;">
                        <img class="avatar" alt="" src="img/avatars/noAvatar.jpg" style="width:50px;height:50px;">
                    </div>
                    <div class="comment-block-new" style="background-color:#fff;">
                        <div class="post-leave-comment" style="border:0px; margin:0px; padding:0px;">
                            <form action="" method="post">
                                <div class="row">
                                    <div class="form-group">
                                        <div class="col-md-12">
                                            <textarea maxlength="500" rows="1" class="form-control" name="comment" id="comment" onClick="expandComment(this,this.form);">Post your comment...</textarea>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </li>

And the functions.js

function expandComment(inputC,formC){
    inputC.innerHTML = '';

    var showReplyOptions = '<div class="row" id="commentUserInfo" data-appear-animation="fadeInDown">'
    +                                '<div class="form-group">'
    +                                    '<div class="col-md-4">'
    +                                        '<label>Your name</label>'
    +                                        '<input type="text" value="" maxlength="100" class="form-control" name="name" id="name">'
    +                                    '</div>'
    +                                '</div>'
    +                            '</div>'
    +                            '<div class="row" id="commentPost" data-appear-animation="fadeInDown">'
    +                                '<div class="col-md-12">'
    +                                    '<input type="submit" value="Post Comment" class="btn btn-primary btn-lg" data-loading-text="Loading...">'
    +                                '</div>'
    +                            '</div>';

    formC.innerHTML = formC.innerHTML + showReplyOptions;
}

Now I want the expand function only to run once. I need to create the expanding dynamically cause of the IDs and an upcoming reply system. How to do that?

Thank you in advance.

Answer 1

Did you try adding a flag for it?

var bExpandFunctionRunned = false;

function expandComment(inputC,formC){
    // it won't run again once the flag is set.
    if(bExpandFunctionRunned == false){
        bExpandFunctionRunned = true;

        inputC.innerHTML = '';

        var showReplyOptions = '<div class="row" id="commentUserInfo" data-appear-animation="fadeInDown">'
        +                                '<div class="form-group">'
        +                                    '<div class="col-md-4">'
        +                                        '<label>Your name</label>'
        +                                        '<input type="text" value="" maxlength="100" class="form-control" name="name" id="name">'
        +                                    '</div>'
        +                                '</div>'
        +                            '</div>'
        +                            '<div class="row" id="commentPost" data-appear-animation="fadeInDown">'
        +                                '<div class="col-md-12">'
        +                                    '<input type="submit" value="Post Comment" class="btn btn-primary btn-lg" data-loading-text="Loading...">'
        +                                '</div>'
        +                            '</div>';

        formC.innerHTML = formC.innerHTML + showReplyOptions;
    }
}

Answer 2

Best way to assign flag value of in element dataSet and when event call, check flag value function, if already call return from top of function, see below code

function expandComment(inputC,formC){

  /***return event code****/
    if(inputC.dataset.offclickevent === true)
       return;
    else
       inputC.dataset.offclickevent = true;
  /****************/


    inputC.innerHTML = '';

    var showReplyOptions = '<div class="row" id="commentUserInfo" data-appear-animation="fadeInDown">'
                                    '<div class="form-group">'
                                        '<div class="col-md-4">'
                                            '<label>Your name</label>'
                                            '<input type="text" value="" maxlength="100" class="form-control" name="name" id="name">'
                                        '</div>'
                                    '</div>'
                                '</div>'
                                '<div class="row" id="commentPost" data-appear-animation="fadeInDown">'
                                    '<div class="col-md-12">'
                                        '<input type="submit" value="Post Comment" class="btn btn-primary btn-lg" data-loading-text="Loading...">'
                                    '</div>'
                                '</div>';

    formC.innerHTML = formC.innerHTML + showReplyOptions;
}