adding EventListener on unknown number of buttons

Question

I have an issue where I have a for loop, that appends some data and builds a table.

for (var p = 0; p < Tbarray.length; p++) 
{
    if (notfirsttime == 'false') 
    {
        $("#Ttable").append('<tr><th>Course</th><th>Places left</th><th>Time</th><th>Date</th></tr>');
        $("#Ttable").append('<tr><td>' + Tbarray[p][0] + '</td><td>' + Tbarray[p][3] + '</td><td>' + Tbarray[p][2] + '</td><td>' + Tbarray[p][1] + '</td><td><button  role="button" id="Signupbutton'+p+'">Sign Up</button></td></tr>');
    }

    notfirsttime = 'true';

    } else 
    {
       $("#Ttable").append('<tr><td>' + Tbarray[p][0] + '</td><td>' + Tbarray[p][3] + '</td><td>' + Tbarray[p][2] + '</td><td>' + Tbarray[p][1] + '</td><td><button  role="button" id="Signupbutton'+p+'">Sign Up</button></td></tr>');
    }

}

now this code also adds a button at the end of the row of and I could just make a hundred or so

var buttonSignup = document.getElementById("Signupbutton0");

if (buttonSignup) {
    buttonSignup.addEventListener('click', test);
}

And then at least the first 100 buttons will work, but I don't know how many rows there will be. This will go up and down. I'm looking for a better way to do this. If anyone has some ideas that would be really helpful.

Just give a `class` to that button, and use getElementsByClassName instead ( https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName). Then, loop each button and add the event listener, so that you won't need to work with strange ids. — briosheje, Aug 31 '18 at 08:56
Use a single delegated event handler on all the buttons, which you can hook to the class on the button. In addition you appear to have syntax issues with mis-matched braces. I'd also strongly suggest you change `notfirsttime` to be a boolean, not a string. — Rory McCrossan, Aug 31 '18 at 08:57
@briosheje - Or, since the OP is using jQuery, `$(".classname").on("click", ...)` @ adam - Or event delegation, which is likely your best option and is covered by the linked question's answers. — T.J. Crowder, Aug 31 '18 at 08:57
@Chamuth, while some of your edit may have been helpful, you should avoid making stylistic code changes, also, hundred is spelt hundred, not hundread as you corrected it to. You should also try to remove phrases like "Thanks" — Nick is tired, Aug 31 '18 at 09:06
@T.J.Crowder : yep, but it looks like he is using getElementById, so I guessed he preferred the plain javascript function :). — briosheje, Aug 31 '18 at 09:07
@T.J.Crowder The $(".classname").on("click", ...) is working great however this looks like it makes all the buttons do the same thing. I need the buttons to alert the data in the same row that they are in. — adam Wadsworth, Aug 31 '18 at 12:25
@adamWadsworth - `this` within the handler will refer to the specific button that was pressed. You can then use jQuery's various "traversal" methods to find the information in that row that you need. — T.J. Crowder, Aug 31 '18 at 12:33

adding EventListener on unknown number of buttons

0 Answers0