JavaScript onclick function only works once (very simple code)










0















I know there are many topics about this, but they address some variable issue. Mine is much more simple, but it is not working. Only works once.






var bt1;
document.addEventListener('DOMContentLoaded', load);

function load()
document.body.innerHTML += '<div>welcome</div>';
bt1 = document.getElementById('bt1');
bt1.onclick = clicked;


function clicked()
document.body.innerHTML += '<div>welcome</div>';

<body>
<button id="bt1">Click me</button>
</body>





I tried taking the clicked function in and out of the onclick statement (as some other topics suggested).



I also tried moving the bt1 variable declaration around (and not using a variable at all).










share|improve this question




























    0















    I know there are many topics about this, but they address some variable issue. Mine is much more simple, but it is not working. Only works once.






    var bt1;
    document.addEventListener('DOMContentLoaded', load);

    function load()
    document.body.innerHTML += '<div>welcome</div>';
    bt1 = document.getElementById('bt1');
    bt1.onclick = clicked;


    function clicked()
    document.body.innerHTML += '<div>welcome</div>';

    <body>
    <button id="bt1">Click me</button>
    </body>





    I tried taking the clicked function in and out of the onclick statement (as some other topics suggested).



    I also tried moving the bt1 variable declaration around (and not using a variable at all).










    share|improve this question


























      0












      0








      0








      I know there are many topics about this, but they address some variable issue. Mine is much more simple, but it is not working. Only works once.






      var bt1;
      document.addEventListener('DOMContentLoaded', load);

      function load()
      document.body.innerHTML += '<div>welcome</div>';
      bt1 = document.getElementById('bt1');
      bt1.onclick = clicked;


      function clicked()
      document.body.innerHTML += '<div>welcome</div>';

      <body>
      <button id="bt1">Click me</button>
      </body>





      I tried taking the clicked function in and out of the onclick statement (as some other topics suggested).



      I also tried moving the bt1 variable declaration around (and not using a variable at all).










      share|improve this question
















      I know there are many topics about this, but they address some variable issue. Mine is much more simple, but it is not working. Only works once.






      var bt1;
      document.addEventListener('DOMContentLoaded', load);

      function load()
      document.body.innerHTML += '<div>welcome</div>';
      bt1 = document.getElementById('bt1');
      bt1.onclick = clicked;


      function clicked()
      document.body.innerHTML += '<div>welcome</div>';

      <body>
      <button id="bt1">Click me</button>
      </body>





      I tried taking the clicked function in and out of the onclick statement (as some other topics suggested).



      I also tried moving the bt1 variable declaration around (and not using a variable at all).






      var bt1;
      document.addEventListener('DOMContentLoaded', load);

      function load()
      document.body.innerHTML += '<div>welcome</div>';
      bt1 = document.getElementById('bt1');
      bt1.onclick = clicked;


      function clicked()
      document.body.innerHTML += '<div>welcome</div>';

      <body>
      <button id="bt1">Click me</button>
      </body>





      var bt1;
      document.addEventListener('DOMContentLoaded', load);

      function load()
      document.body.innerHTML += '<div>welcome</div>';
      bt1 = document.getElementById('bt1');
      bt1.onclick = clicked;


      function clicked()
      document.body.innerHTML += '<div>welcome</div>';

      <body>
      <button id="bt1">Click me</button>
      </body>






      javascript html onclick onclicklistener






      share|improve this question















      share|improve this question













      share|improve this question




      share|improve this question








      edited Nov 13 '18 at 4:34









      CertainPerformance

      83.5k144168




      83.5k144168










      asked Nov 13 '18 at 4:22









      John McJohn Mc

      13




      13






















          2 Answers
          2






          active

          oldest

          votes


















          4














          Whenever you assign to the innerHTML of a container (even if you're just concatenating with existing HTML), the container's contents will be removed, and the new innerHTML string will be parsed and then rendered by the browser. So, listeners that used to be attached to anything inside of the container will no longer work.






          const container = document.querySelector('#container');
          const child = container.children[0];

          // Before: the child's parent is the `container`, as expected:
          console.log(child.parentElement);

          container.innerHTML += '';

          // After: the child has no parent element!
          // If a listener was attached to the child before,
          // the child will no longer even be in the document!
          console.log(child.parentElement);

          <div id="container">
          <div>child</div>
          </div>





          For what you're doing, either use insertAdjacentHTML, which will not corrupt listeners, but will perform similar functionality to innerHTML +=:






          var bt1;
          document.addEventListener('DOMContentLoaded', load);
          function load()
          document.body.innerHTML += '<div>welcome</div>';
          bt1 = document.getElementById('bt1');
          bt1.onclick = clicked;


          function clicked()
          document.body.insertAdjacentHTML('beforeend', '<div>welcome</div>');

          <body>
          <button id="bt1">Click me</button>
          </body>





          Or, explicitly create the new element to append, and use appendChild:






          var bt1;
          document.addEventListener('DOMContentLoaded', load);
          function load()
          document.body.innerHTML += '<div>welcome</div>';
          bt1 = document.getElementById('bt1');
          bt1.onclick = clicked;


          function clicked()
          const div = document.createElement('div');
          div.textContent = 'welcome';
          document.body.appendChild(div);

          <body>
          <button id="bt1">Click me</button>
          </body>








          share|improve this answer























          • And why when I insert bt1.onclick = clicked; again right after I do the innerHTML += it is not re-adding the listener? EDIT: nevermind, I added the getElementById again too and it worked.

            – John Mc
            Nov 13 '18 at 4:32












          • You would have to explicitly tell the interpreter to re-add the listener, for the listener to be re-added -eg, select btn1 again and use bt1.onclick = clicked;

            – CertainPerformance
            Nov 13 '18 at 4:34


















          0














          Another quick fix would be to reattach the listener in clicked mehtod.






          var bt1;
          document.addEventListener('DOMContentLoaded', load);

          function load()
          document.body.innerHTML += '<div>welcome</div>';
          bt1 = document.getElementById('bt1');
          bt1.onclick = clicked;


          function clicked(a)
          document.body.innerHTML += '<div>welcome</div>';
          bt1 = document.getElementById('bt1');
          bt1.onclick = clicked;

          <body>
          <button id="bt1">Click Me</button>
          </body>








          share|improve this answer






















            Your Answer






            StackExchange.ifUsing("editor", function ()
            StackExchange.using("externalEditor", function ()
            StackExchange.using("snippets", function ()
            StackExchange.snippets.init();
            );
            );
            , "code-snippets");

            StackExchange.ready(function()
            var channelOptions =
            tags: "".split(" "),
            id: "1"
            ;
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function()
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled)
            StackExchange.using("snippets", function()
            createEditor();
            );

            else
            createEditor();

            );

            function createEditor()
            StackExchange.prepareEditor(
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader:
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            ,
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            );



            );













            draft saved

            draft discarded


















            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53273768%2fjavascript-onclick-function-only-works-once-very-simple-code%23new-answer', 'question_page');

            );

            Post as a guest















            Required, but never shown

























            2 Answers
            2






            active

            oldest

            votes








            2 Answers
            2






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            4














            Whenever you assign to the innerHTML of a container (even if you're just concatenating with existing HTML), the container's contents will be removed, and the new innerHTML string will be parsed and then rendered by the browser. So, listeners that used to be attached to anything inside of the container will no longer work.






            const container = document.querySelector('#container');
            const child = container.children[0];

            // Before: the child's parent is the `container`, as expected:
            console.log(child.parentElement);

            container.innerHTML += '';

            // After: the child has no parent element!
            // If a listener was attached to the child before,
            // the child will no longer even be in the document!
            console.log(child.parentElement);

            <div id="container">
            <div>child</div>
            </div>





            For what you're doing, either use insertAdjacentHTML, which will not corrupt listeners, but will perform similar functionality to innerHTML +=:






            var bt1;
            document.addEventListener('DOMContentLoaded', load);
            function load()
            document.body.innerHTML += '<div>welcome</div>';
            bt1 = document.getElementById('bt1');
            bt1.onclick = clicked;


            function clicked()
            document.body.insertAdjacentHTML('beforeend', '<div>welcome</div>');

            <body>
            <button id="bt1">Click me</button>
            </body>





            Or, explicitly create the new element to append, and use appendChild:






            var bt1;
            document.addEventListener('DOMContentLoaded', load);
            function load()
            document.body.innerHTML += '<div>welcome</div>';
            bt1 = document.getElementById('bt1');
            bt1.onclick = clicked;


            function clicked()
            const div = document.createElement('div');
            div.textContent = 'welcome';
            document.body.appendChild(div);

            <body>
            <button id="bt1">Click me</button>
            </body>








            share|improve this answer























            • And why when I insert bt1.onclick = clicked; again right after I do the innerHTML += it is not re-adding the listener? EDIT: nevermind, I added the getElementById again too and it worked.

              – John Mc
              Nov 13 '18 at 4:32












            • You would have to explicitly tell the interpreter to re-add the listener, for the listener to be re-added -eg, select btn1 again and use bt1.onclick = clicked;

              – CertainPerformance
              Nov 13 '18 at 4:34















            4














            Whenever you assign to the innerHTML of a container (even if you're just concatenating with existing HTML), the container's contents will be removed, and the new innerHTML string will be parsed and then rendered by the browser. So, listeners that used to be attached to anything inside of the container will no longer work.






            const container = document.querySelector('#container');
            const child = container.children[0];

            // Before: the child's parent is the `container`, as expected:
            console.log(child.parentElement);

            container.innerHTML += '';

            // After: the child has no parent element!
            // If a listener was attached to the child before,
            // the child will no longer even be in the document!
            console.log(child.parentElement);

            <div id="container">
            <div>child</div>
            </div>





            For what you're doing, either use insertAdjacentHTML, which will not corrupt listeners, but will perform similar functionality to innerHTML +=:






            var bt1;
            document.addEventListener('DOMContentLoaded', load);
            function load()
            document.body.innerHTML += '<div>welcome</div>';
            bt1 = document.getElementById('bt1');
            bt1.onclick = clicked;


            function clicked()
            document.body.insertAdjacentHTML('beforeend', '<div>welcome</div>');

            <body>
            <button id="bt1">Click me</button>
            </body>





            Or, explicitly create the new element to append, and use appendChild:






            var bt1;
            document.addEventListener('DOMContentLoaded', load);
            function load()
            document.body.innerHTML += '<div>welcome</div>';
            bt1 = document.getElementById('bt1');
            bt1.onclick = clicked;


            function clicked()
            const div = document.createElement('div');
            div.textContent = 'welcome';
            document.body.appendChild(div);

            <body>
            <button id="bt1">Click me</button>
            </body>








            share|improve this answer























            • And why when I insert bt1.onclick = clicked; again right after I do the innerHTML += it is not re-adding the listener? EDIT: nevermind, I added the getElementById again too and it worked.

              – John Mc
              Nov 13 '18 at 4:32












            • You would have to explicitly tell the interpreter to re-add the listener, for the listener to be re-added -eg, select btn1 again and use bt1.onclick = clicked;

              – CertainPerformance
              Nov 13 '18 at 4:34













            4












            4








            4







            Whenever you assign to the innerHTML of a container (even if you're just concatenating with existing HTML), the container's contents will be removed, and the new innerHTML string will be parsed and then rendered by the browser. So, listeners that used to be attached to anything inside of the container will no longer work.






            const container = document.querySelector('#container');
            const child = container.children[0];

            // Before: the child's parent is the `container`, as expected:
            console.log(child.parentElement);

            container.innerHTML += '';

            // After: the child has no parent element!
            // If a listener was attached to the child before,
            // the child will no longer even be in the document!
            console.log(child.parentElement);

            <div id="container">
            <div>child</div>
            </div>





            For what you're doing, either use insertAdjacentHTML, which will not corrupt listeners, but will perform similar functionality to innerHTML +=:






            var bt1;
            document.addEventListener('DOMContentLoaded', load);
            function load()
            document.body.innerHTML += '<div>welcome</div>';
            bt1 = document.getElementById('bt1');
            bt1.onclick = clicked;


            function clicked()
            document.body.insertAdjacentHTML('beforeend', '<div>welcome</div>');

            <body>
            <button id="bt1">Click me</button>
            </body>





            Or, explicitly create the new element to append, and use appendChild:






            var bt1;
            document.addEventListener('DOMContentLoaded', load);
            function load()
            document.body.innerHTML += '<div>welcome</div>';
            bt1 = document.getElementById('bt1');
            bt1.onclick = clicked;


            function clicked()
            const div = document.createElement('div');
            div.textContent = 'welcome';
            document.body.appendChild(div);

            <body>
            <button id="bt1">Click me</button>
            </body>








            share|improve this answer













            Whenever you assign to the innerHTML of a container (even if you're just concatenating with existing HTML), the container's contents will be removed, and the new innerHTML string will be parsed and then rendered by the browser. So, listeners that used to be attached to anything inside of the container will no longer work.






            const container = document.querySelector('#container');
            const child = container.children[0];

            // Before: the child's parent is the `container`, as expected:
            console.log(child.parentElement);

            container.innerHTML += '';

            // After: the child has no parent element!
            // If a listener was attached to the child before,
            // the child will no longer even be in the document!
            console.log(child.parentElement);

            <div id="container">
            <div>child</div>
            </div>





            For what you're doing, either use insertAdjacentHTML, which will not corrupt listeners, but will perform similar functionality to innerHTML +=:






            var bt1;
            document.addEventListener('DOMContentLoaded', load);
            function load()
            document.body.innerHTML += '<div>welcome</div>';
            bt1 = document.getElementById('bt1');
            bt1.onclick = clicked;


            function clicked()
            document.body.insertAdjacentHTML('beforeend', '<div>welcome</div>');

            <body>
            <button id="bt1">Click me</button>
            </body>





            Or, explicitly create the new element to append, and use appendChild:






            var bt1;
            document.addEventListener('DOMContentLoaded', load);
            function load()
            document.body.innerHTML += '<div>welcome</div>';
            bt1 = document.getElementById('bt1');
            bt1.onclick = clicked;


            function clicked()
            const div = document.createElement('div');
            div.textContent = 'welcome';
            document.body.appendChild(div);

            <body>
            <button id="bt1">Click me</button>
            </body>








            const container = document.querySelector('#container');
            const child = container.children[0];

            // Before: the child's parent is the `container`, as expected:
            console.log(child.parentElement);

            container.innerHTML += '';

            // After: the child has no parent element!
            // If a listener was attached to the child before,
            // the child will no longer even be in the document!
            console.log(child.parentElement);

            <div id="container">
            <div>child</div>
            </div>





            const container = document.querySelector('#container');
            const child = container.children[0];

            // Before: the child's parent is the `container`, as expected:
            console.log(child.parentElement);

            container.innerHTML += '';

            // After: the child has no parent element!
            // If a listener was attached to the child before,
            // the child will no longer even be in the document!
            console.log(child.parentElement);

            <div id="container">
            <div>child</div>
            </div>





            var bt1;
            document.addEventListener('DOMContentLoaded', load);
            function load()
            document.body.innerHTML += '<div>welcome</div>';
            bt1 = document.getElementById('bt1');
            bt1.onclick = clicked;


            function clicked()
            document.body.insertAdjacentHTML('beforeend', '<div>welcome</div>');

            <body>
            <button id="bt1">Click me</button>
            </body>





            var bt1;
            document.addEventListener('DOMContentLoaded', load);
            function load()
            document.body.innerHTML += '<div>welcome</div>';
            bt1 = document.getElementById('bt1');
            bt1.onclick = clicked;


            function clicked()
            document.body.insertAdjacentHTML('beforeend', '<div>welcome</div>');

            <body>
            <button id="bt1">Click me</button>
            </body>





            var bt1;
            document.addEventListener('DOMContentLoaded', load);
            function load()
            document.body.innerHTML += '<div>welcome</div>';
            bt1 = document.getElementById('bt1');
            bt1.onclick = clicked;


            function clicked()
            const div = document.createElement('div');
            div.textContent = 'welcome';
            document.body.appendChild(div);

            <body>
            <button id="bt1">Click me</button>
            </body>





            var bt1;
            document.addEventListener('DOMContentLoaded', load);
            function load()
            document.body.innerHTML += '<div>welcome</div>';
            bt1 = document.getElementById('bt1');
            bt1.onclick = clicked;


            function clicked()
            const div = document.createElement('div');
            div.textContent = 'welcome';
            document.body.appendChild(div);

            <body>
            <button id="bt1">Click me</button>
            </body>






            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Nov 13 '18 at 4:26









            CertainPerformanceCertainPerformance

            83.5k144168




            83.5k144168












            • And why when I insert bt1.onclick = clicked; again right after I do the innerHTML += it is not re-adding the listener? EDIT: nevermind, I added the getElementById again too and it worked.

              – John Mc
              Nov 13 '18 at 4:32












            • You would have to explicitly tell the interpreter to re-add the listener, for the listener to be re-added -eg, select btn1 again and use bt1.onclick = clicked;

              – CertainPerformance
              Nov 13 '18 at 4:34

















            • And why when I insert bt1.onclick = clicked; again right after I do the innerHTML += it is not re-adding the listener? EDIT: nevermind, I added the getElementById again too and it worked.

              – John Mc
              Nov 13 '18 at 4:32












            • You would have to explicitly tell the interpreter to re-add the listener, for the listener to be re-added -eg, select btn1 again and use bt1.onclick = clicked;

              – CertainPerformance
              Nov 13 '18 at 4:34
















            And why when I insert bt1.onclick = clicked; again right after I do the innerHTML += it is not re-adding the listener? EDIT: nevermind, I added the getElementById again too and it worked.

            – John Mc
            Nov 13 '18 at 4:32






            And why when I insert bt1.onclick = clicked; again right after I do the innerHTML += it is not re-adding the listener? EDIT: nevermind, I added the getElementById again too and it worked.

            – John Mc
            Nov 13 '18 at 4:32














            You would have to explicitly tell the interpreter to re-add the listener, for the listener to be re-added -eg, select btn1 again and use bt1.onclick = clicked;

            – CertainPerformance
            Nov 13 '18 at 4:34





            You would have to explicitly tell the interpreter to re-add the listener, for the listener to be re-added -eg, select btn1 again and use bt1.onclick = clicked;

            – CertainPerformance
            Nov 13 '18 at 4:34













            0














            Another quick fix would be to reattach the listener in clicked mehtod.






            var bt1;
            document.addEventListener('DOMContentLoaded', load);

            function load()
            document.body.innerHTML += '<div>welcome</div>';
            bt1 = document.getElementById('bt1');
            bt1.onclick = clicked;


            function clicked(a)
            document.body.innerHTML += '<div>welcome</div>';
            bt1 = document.getElementById('bt1');
            bt1.onclick = clicked;

            <body>
            <button id="bt1">Click Me</button>
            </body>








            share|improve this answer



























              0














              Another quick fix would be to reattach the listener in clicked mehtod.






              var bt1;
              document.addEventListener('DOMContentLoaded', load);

              function load()
              document.body.innerHTML += '<div>welcome</div>';
              bt1 = document.getElementById('bt1');
              bt1.onclick = clicked;


              function clicked(a)
              document.body.innerHTML += '<div>welcome</div>';
              bt1 = document.getElementById('bt1');
              bt1.onclick = clicked;

              <body>
              <button id="bt1">Click Me</button>
              </body>








              share|improve this answer

























                0












                0








                0







                Another quick fix would be to reattach the listener in clicked mehtod.






                var bt1;
                document.addEventListener('DOMContentLoaded', load);

                function load()
                document.body.innerHTML += '<div>welcome</div>';
                bt1 = document.getElementById('bt1');
                bt1.onclick = clicked;


                function clicked(a)
                document.body.innerHTML += '<div>welcome</div>';
                bt1 = document.getElementById('bt1');
                bt1.onclick = clicked;

                <body>
                <button id="bt1">Click Me</button>
                </body>








                share|improve this answer













                Another quick fix would be to reattach the listener in clicked mehtod.






                var bt1;
                document.addEventListener('DOMContentLoaded', load);

                function load()
                document.body.innerHTML += '<div>welcome</div>';
                bt1 = document.getElementById('bt1');
                bt1.onclick = clicked;


                function clicked(a)
                document.body.innerHTML += '<div>welcome</div>';
                bt1 = document.getElementById('bt1');
                bt1.onclick = clicked;

                <body>
                <button id="bt1">Click Me</button>
                </body>








                var bt1;
                document.addEventListener('DOMContentLoaded', load);

                function load()
                document.body.innerHTML += '<div>welcome</div>';
                bt1 = document.getElementById('bt1');
                bt1.onclick = clicked;


                function clicked(a)
                document.body.innerHTML += '<div>welcome</div>';
                bt1 = document.getElementById('bt1');
                bt1.onclick = clicked;

                <body>
                <button id="bt1">Click Me</button>
                </body>





                var bt1;
                document.addEventListener('DOMContentLoaded', load);

                function load()
                document.body.innerHTML += '<div>welcome</div>';
                bt1 = document.getElementById('bt1');
                bt1.onclick = clicked;


                function clicked(a)
                document.body.innerHTML += '<div>welcome</div>';
                bt1 = document.getElementById('bt1');
                bt1.onclick = clicked;

                <body>
                <button id="bt1">Click Me</button>
                </body>






                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 13 '18 at 7:31









                HAKHAK

                958716




                958716



























                    draft saved

                    draft discarded
















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid


                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.

                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function ()
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53273768%2fjavascript-onclick-function-only-works-once-very-simple-code%23new-answer', 'question_page');

                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    Kleinkühnau

                    Makov (Slowakei)

                    Deutsches Schauspielhaus