CODEWITHSUNDEEP
javascriptjqueryhtml
cr1zz
cr1zz

Reputation: 577

Javascript onClick event just once?

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.

Upvotes: 0

Views: 160

Answers (2)

Girish
Girish

Reputation: 12127

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;
}

Upvotes: 0

Taha Paksu
Taha Paksu

Reputation: 15616

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;
    }
}

Upvotes: 1

Related Questions