appendChild with onclick function that passes through the div's value

Question

Good day everyone,

I've been grinding the whole day yesterday at this function however I've been running in circles and would appreciate any input or suggestions.

Currently I want to create a onclick function on my div (match-tab) that when it gets clicked it will send it's value to my javascript which will let the function know which game's data it should render.

at the moment my function looks like this:


    for (x in data){

        var recent_matches_row_one = document.getElementById('recent-matches-row-one');
        var recent_matches_row_two = document.getElementById('recent-matches-row-two');

        var col = document.createElement("div");
        col.className = "col no-padding";

        var matchTab = document.createElement("div");
        matchTab.className = "match-tab";
        matchTab.id = "match-tab";
        matchTab.value = x;
        matchTab.innerHTML = ++x;
        matchTab.onclick = foo(this.value);

        if (x < 15){
            recent_matches_row_one.appendChild(col);
            col.appendChild(matchTab);
        } else if (x > 15) {
            recent_matches_row_two.appendChild(col);
            col.appendChild(matchTab);
        }
    }

}


function foo(value){
    var v = value;
    console.log(v);
}

As you can see the recent matches functions renders the amount of match tabs according to the amount of match data available.

The front end looks like this and as you can see it is seen as undefined.

I would really like to write this whole application in vanilla JavaScript since I'm new to it and want to learn it before moving to other frameworks and libraries.

Thanks

first of all: a div has no attribute value. second: this.value is undefined, because you haven't defined a variable named value anywhere. this.value is not matchtab.value. it is the variable value. — Der Alex
– Der Alex, Commented Nov 13, 2019 at 7:53
@dev_junwen I have however then i get "Uncaught TypeError: Cannot read property 'addEventListener' of null" — ViVAZ
– ViVAZ, Commented Nov 13, 2019 at 8:03
@DerAlex ahh okay I understand, so i will have to make use of an event listener or use a button rather then a div? — ViVAZ
– ViVAZ, Commented Nov 13, 2019 at 8:05
You already have an eventlistener with matchTab.onclick. You just don't send the correct data to your function. If you need the value of x on your element, try to use data-attributes. if you only need to pass the value of x into the function, then try this: matchTab.onclick = foo(x); — Der Alex
– Der Alex, Commented Nov 13, 2019 at 8:17

Abhishek Pandey · Accepted Answer · 2019-11-14 06:49:21Z

1

So the answer to my question was is the fact that I had to change matchTab.onclick = foo(x); to matchTab.onclick = function(){foo(this.value)}; this allowed me to get the value assigned in my JavaScript. Thanks for all the input!

edited Nov 14, 2019 at 6:49

Abhishek Pandey

13.6k8 gold badges41 silver badges72 bronze badges

answered Nov 13, 2019 at 9:08

ViVAZ

611 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Der Alex Over a year ago

To understand why this didn't work: the event expects a function name, not the function call itself. Therefore you have to wrap your function into an anonymous function.

Collectives™ on Stack Overflow

appendChild with onclick function that passes through the div's value

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related