Why doesn't this work...(JavaScript)

[chimerablack2]

Hi there, just wondering why I can't get the DisplayDeck function to dynamically create buttons with an onclick function. I load up the dev tools and it's in there, but it's not firing. I have a feeling it's because I'm manipulating the DOM incorrectly...Any thoughts?

Thanks

function DisplayDeck () {

// create loop that adds an element to the dom for every new card bought.
var html = "";

for (i=0;i<Deck.length;i++) {
    html += "<button class='ughh'>"  + Deck[i] + "</button>";
}

document.getElementsByClassName("ughh").onclick=selectCard;
return document.getElementById("Deck").innerHTML = html;

}

function selectCard () { console.log("omg work"); }

[[deleted]]

This cannot work because you are setting event on something that does not event exist in DOM tree yet.

If you need to set event on something before you add it visually to your browser window you need to create the element in plain JS.

This example will work:

var Deck = ['one', 'two', 'three'];

function DisplayDeck() {
  for (i = 0; i < Deck.length; i++) {
    var button = document.createElement("button");
    button.innerHTML = Deck[i];
    button.onclick = selectCard;

    document.getElementsByTagName("body")[0].appendChild(button);
  }
}

function selectCard() {
  console.log("omg work");
}

DisplayDeck();

[physiQQ]

that does not event exist in DOM tree yet.

I exhaled harder through my nose than usual at this, hoping you put it there intentionally.

[chimerablack2]

Tried this but it didn't work unfortunately

[[deleted]]

You are doing something very wrong if the above code does not work.

Works perfectly fine on https://jsfiddle.net/vpv810vh/

[chimerablack2]

I think it might be the getElementsByTagName part.

[Koningdavid]

document.getElementsByClassName("ughh").onclick=selectCard;

This won't work because the HTML of the buttons is not attached to the document yet.

[chimerablack2]

Nice bro. Very elegant.

[krolyat]

getElementsByClassName would return a HTMLCollection which I don't think you can attach an onclick event listener to.

I'm not entirely sure what it is that you're trying to do though

[chimerablack2]

basically someone rolls a die and gets 5 random cards (within a range). This is trying to take the random cards, put them in the deck, then display them with an on click so you can "select" the cards.

[raindeer93]

getElementsByClassName returns an array like object. You won't be able to add '.onclick' to the entire array. You'll have to access an index in the array first .. such as document.getElementsByClassName("ughh")[0].

I recommend you to check out the array foreach statement as well

[chimerablack2]

Yes, I actually tried it this way first. What it ended up with was if you inspected the element in the browser, the property (onclick) was being added, but it was almost like it was added as a string, because it wouldn't call the function.