Web Analytics Made Easy -
StatCounter Javascript duplicate itself - CodingForum

Announcement

Collapse
No announcement yet.

Javascript duplicate itself

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Javascript duplicate itself

    Guys I have a problem with this code.
    The ideea is to write some text into an input form and the javascript take the input value and add it into an li.The problem is first time it work very good but second time works 2 times ,third time works 3 times and so on(if you will try it you will understand).The problem is in the last line of code if I delete it it works normaly but I need it and I don't wanna delete it.Please help


    Copy here the following code --------Tryit Editor v3.0


    <!DOCTYPE html>
    <html>
    <head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <title>Page Title</title>
    </head>
    <body>

    <h3 style="color:red;">Press ENTER after you wrote some text into the input form</h3>
    <button id="add">Add</button>
    <input id="AddInput" value='' placeholder="Add" style="display:none">
    <ul id="myUl">
    <li>text</li>
    </ul>

    <script>
    //Add button (NOT READY) //
    $("#add").click(function(){ //Show input form //
    $("#AddInput").css('display','inline');
    $("#AddInput").animate({width:'100%'}); //END SHOW//
    //Check if enter is pressed//
    $("#AddInput").keypress(function(e){
    if(e.which == 13){
    var inputValue=document.getElementById("AddInput").value;//Save the inputed text//

    var t = document.createTextNode(inputValue);//Save the inputValue into a textnode to atach to li

    var li = document.createElement("li"); //Create an li elment//

    li.appendChild(t);//Add the inputValue to the li//

    document.getElementById("myUl").appendChild(li);

    //HERE IS THE PROBLEM -DELETE IT AND WILL WORK FINE//
    $("#AddInput").animate({width:'0'},function(){$("#AddInput").css('display','none');});//Remove the input//



    }//END OF THE IF
    })


    })//END this part of the script(Add)//
    </script>
    </body>
    </html>

  • #2
    Indenting the code in a meaningful way is always helpful to understand and find errors.
    Indented your javascript looks like this:
    Code:
            //Add button (NOT READY) //
            $("#add").click(function() { //Show input form //
                    $("#AddInput").css('display', 'inline');
                    $("#AddInput").animate({
                        width: '100%'
                    }); //this is the termination sequence for animate
                         //click function for #add not yet terminated
                    //Check if enter is pressed//
                    $("#AddInput").keypress(function(e) {
                        if (e.which == 13) {
                            var inputValue = document.getElementById("AddInput").value; //Save the inputed text//
                            var t = document.createTextNode(inputValue); //Save the inputValue into a textnode to atach to li
                            var li = document.createElement("li"); //Create an li elment//
                            li.appendChild(t); //Add the inputValue to the li//
                            document.getElementById("myUl").appendChild(li);
                            //HERE IS THE PROBLEM -DELETE IT AND WILL WORK FINE//
                            $("#AddInput").animate({
                                width: '0'
                            }, function() {
                                $("#AddInput").css('display', 'none');
                            }); //this is the ending sequence for animate()
                        } //END OF THE IF
                    }) // this is the ending sequence for the keypress handler
                }) //this is the ending sequence for the click handler for #add
    Having a closer look the problem becomes obvious: Applying the keypress listener is done in the click listener for #add. Thus everytime #add is clicked an additional keypress listener is added and triggers when the enter key is pressed.
    The solution is applying the keypress listener outside of the click listener for #add:
    Code:
        <script>
            //Add button (NOT READY) //
            $("#add").click(function() { //Show input form //
                $("#AddInput").css('display', 'inline');
                $("#AddInput").animate({
                    width: '100%'
                }); //END SHOW//
                //Check if enter is pressed//
            }) //END this part of the script(Add)//
            $("#AddInput").keypress(function(e) {
                if (e.which == 13) {
                    var inputValue = document.getElementById("AddInput").value; //Save the inputed text//
                    var t = document.createTextNode(inputValue); //Save the inputValue into a textnode to atach to li
                    var li = document.createElement("li"); //Create an li elment//
                    li.appendChild(t); //Add the inputValue to the li//
                    document.getElementById("myUl").appendChild(li);
                    //HERE IS THE PROBLEM -DELETE IT AND WILL WORK FINE//
                    $("#AddInput").animate({
                        width: '0'
                    }, function() {
                        $("#AddInput").css('display', 'none');
                    }); //Remove the input//
                } //END OF THE IF
            })
        </script>
    Last edited by Sempervivum; Sep 6, 2016, 05:20 PM.

    Comment


    • #3
      Thanks for the help.It is way more easier that my solution to detach my input form and reatach it after.

      Comment

      Working...
      X