4

Any ideas why this does not work.

The Yes button when clicked works once - the No button does not work

function $(x) {
    return document.getElementById(x);
}

var glob = 0;

function new_index() {
    glob += 1;
    return "d" + glob;
}

function play() {
    say("Hello is JS Fun?");
    response("No",
        function() {
            say("Oh dear")
        });
    response("Yes",
        function() {
            say("Great:");
        });
}

function say(x) {
    $("txt").innerHTML += x;
}

function response(Txt, Fun) {
    var n = new_index();
    var s = "<button id='" + n + "'>" + Txt + "</button>";
    say(s);
    var xx = $(n);
    // xx.onclick=Fun;
    xx.addEventListener("click", Fun);
}

play();
<div id="txt"></div>

1
  • This question doesn't work. Can you please explain what do you expect your code to do, and what does it instead?
    – Teemu
    Commented Sep 13, 2016 at 12:17

3 Answers 3

8

It's because every time you set the innerHTML it doesn't just add as you might think, it sets innerHTML to a new value and by that deleting the old elements with the old event listeners attached.

2
  • 3
    Goodness inerHTML += x is NOT a pure append operation but has side effects!!! Wow whatever next
    – ja.
    Commented Sep 13, 2016 at 12:38
  • It's because innerHTML is a serialization of the DOM. So it turns the DOM into a string, creates a new, longer string, then deserializes the string into new DOM
    – JoshRagem
    Commented Sep 13, 2016 at 13:22
2

As others have mentioned, the main issue in your code is that you lose event bindings on subsequent innerHTML calls -- No stops working because it comes after Yes. When Yes appends text it breaks itself.

When working with the DOM, it's better to create elements than alter HTML text (with innerHTML). In the case of your buttons it means you don't have to (1) create a button with an ID and then (2) find the button. With createElement you have a reference to it.

function $(x) {
    return document.getElementById(x);
}

var glob = 0;

function new_index() {
    glob += 1;
    return "d" + glob;
}

function play() {
    say(text("Hello is JS Fun?"));
    response("No",
        function() {
            say(text("Oh dear"));
        });
    response("Yes",
        function() {
            say(text("Great:"));
        });
}

function text(String) {
    var node = document.createElement("span");
    node.innerHTML = String;
    return node;
}

function say(x) {
    $("content").appendChild(x);
}

function response(Txt, Fun) {
    var button = document.createElement("button");
    button.innerHTML = Txt;
    button.addEventListener("click", Fun);
    say(button);
}

play();
<div id="content"></div>

1

The event handlers are lost on $("txt").innerHTML += x;.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.