CODEWITHSUNDEEP
javascripthtmlonclickonclicklistener
John Mc
John Mc

Reputation: 411

JavaScript onclick function only works once (very simple code)

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).

Upvotes: 4

Views: 15639

Answers (3)

dogakorkmaz
dogakorkmaz

Reputation: 139

Apparently you can do this.

    app = document.getElementById("my_dummy_app");

    function start() {
        // get your element inside of wrapper element that you want 
        // to change its html content
        button = document.getElementById("button_inside_of_app");
        button.addEventListener("event", () => {
            app.innerHTML = // some html
        })        
        // then restart your function so 'button' will defined again
        // we do this because we changed dom and now we need to 
        // assign our button to its element again
        start()
    }

    start()

or this

    app = document.getElementById("my_dummy_app");

    function start(root) {
        // get your element inside of wrapper element that you want 
        // to change its html content
        button = document.getElementById("button_inside_of_app");
        button.addEventListener("event", () => {
            root.innerHTML = // some html
        })
        // then restart your function so 'button' will defined again
        // we do this because we changed dom and now we need to 
        // assign our button to its element again
        start(app)
    }

    start(app)

edit: on second look, it's an infinite loop

Upvotes: -1

HAK
HAK

Reputation: 2081

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>

Upvotes: 1

CertainPerformance
CertainPerformance

Reputation: 371198

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>

Upvotes: 10

Related Questions