1

When I try the code referenced in SO #1, I get the console logging a blank string:

installChoices() {
        var choices = this.game.page.options;
        for (var i = 0; i < choices.length; i++) {
            var choice = choices[i];
            var choiceDiv = document.createElement("choice" + i);
            choiceDiv.innerText = choice[0];
            choiceDiv.onclick = function() {
                console.log(this.id);
            }
            this.choicesContainer.appendChild(choiceDiv);
        }

    }

I want to bind to my class function clicked

installChoices() {
        var choices = this.game.page.options;
        for (var i = 0; i < choices.length; i++) {
            var choice = choices[i];
            var choiceDiv = document.createElement("choice" + i);
            choiceDiv.innerText = choice[0];
            choiceDiv.onclick = this.clicked;
            this.choicesContainer.appendChild(choiceDiv);
        }

    }

    clicked(e) {
        console.log(e.parentNode); //this is undefined
        console.log(e.srcElement);
    }

But that shows undefined. When I log srcElement, I get the full element

<choice0>path 1</choice0>

I want to get just the div id when I click, so I can parse that and do logic.

Community
  • 1
  • 1
quantumpotato
  • 9,637
  • 14
  • 70
  • 146

2 Answers2

0

I'd recommend the following approach, as it is the standard:

//assign the event
choiceDiv.addEventListener('click', clicked)

//define the listener
function clicked(event) {
    console.log(event.currentTarget)
}

update:

I'm tempted to offer a fix to your code, because I don't think you're achieving what are you trying to actually do:

function installChoices() {
    var choices = this.game.page.options;
    for (var i = 0; i < choices.length; i++) {
        var choice = choices[i];
        var choiceDiv = document.createElement("div");
        choiceDiv.id = "choice" + i;
        choiceDiv.innerText = choice[0];
        choiceDiv.addEventListener("click", clicked);
        this.choicesContainer.appendChild(choiceDiv);
    }
}

function clicked(ev) {
    console.log(ev.currentTarget.id); //this will log "choice0"
}
fixmycode
  • 8,220
  • 2
  • 28
  • 43
  • 1
    `event.srcElement || event.currentTarget || event.target` for cross browser – Ryan Jan 10 '16 at 00:25
  • you have the clicked function, I should use this.clicked since I'm in a class, correct? Does that affect anything? (Testing your code now!) – quantumpotato Jan 10 '16 at 00:26
  • 1
    Thanks so much, that works! I'll use addEventListener int he future that works great. – quantumpotato Jan 10 '16 at 00:26
  • How can I pass in a reference to mycurrent object, since this is being overriden? – quantumpotato Jan 10 '16 at 00:30
  • @self: He's using `.addEventListener()`, so that's unnecessary, and it's not really correct since `event.currentTarget` isn't necessarily the same as `event.target` and `event.srcElement`. –  Jan 10 '16 at 00:37
  • yeah well `event` global variable doesn't exist in firefox, so `event` is just a variable name of the arguments of the second argument which is a function to the `addEventListener` – Ryan Jan 10 '16 at 00:41
  • How can I pass in a reference to my current object, eg extra params? – quantumpotato Jan 10 '16 at 00:42
  • @self: Not sure what you mean. He's not using the `event` global variable, and I was talking about the `.srcElement` and `.target` properties. There's just no need for those to make it cross browser. –  Jan 10 '16 at 00:42
  • I got it with this: http://stackoverflow.com/questions/256754/how-to-pass-arguments-to-addeventlistener-listener-function – quantumpotato Jan 10 '16 at 00:46
  • the fact is that one of those properties aren't standard and I don't have time to look it up in the W3 spec – Ryan Jan 10 '16 at 00:48
0

Your "clicked" function are receiving an Event rather than a HTML Element. This is the default behavior when an onClick event triggered.

The click event have a srcElement property, indicating the source element the click event occurred upon. This event object have no parentNode property.

Use e.srcElement.parentNode instead.

BTW, in the SO #1 example, it assign "showIt(this)" to onClick, so browser pass "this", the target element rather than the event object, to the onClick function.

alvin
  • 51
  • 1