JavaScript not working on buttons within a Wizard step

[eleven]

I wanted to rule out if this is some kind of issue with Telerik - I've implemented this in CodePen and it works there, but not with what I'm using in Visual Studio w/ the entire code. 

I have a series of buttons like so:

    <wizard-step title="Step 2">
                            <wizard-step-content>
<span class="nowrap d-flex flex-row"><div class="reasons">
                                                    @Html.RadioButtonFor(c => c.category, item.Value, new { id = item.Value, name = "Lists", @value = item.Value, @text = item.Text, @class = "reasons-input"})
                                                    <label for="@(item.Value)"
                                                       class="reasons-label">@item.Text</label></div><button type="button"
                                                    id="@item.Value"
                                                    class="inputBtn btn btn-secondary"
                                                    data-toggle="modal"
                                                    datatarget="#@item.Value"
                                                    style="background-color: transparent; border-color: transparent; color: #007bff; font-size: 21px;"><i class="fa fa-question-circle"></i></button></span>
</wizard-step-content>
                        </wizard-step>

And here's my attempt at setting up event listeners

  var inputButtons = document.querySelectorAll(".inputBtn");
            console.log(inputButtons);
            console.log(inputButtons.length);
            var buttonsCount = inputButtons.length;
                for (var i = 0; i <= buttonsCount; i += 1) {
                    inputButtons[i].addEventListener("click", function(e) {
                    console.log("HI");
                });
            }

However, I'm not able to grab anything w/ the querySelectorAll method - it's returning 0 length when sandwiched in Wizard Step tags but when in CodePen and without Telerik, it's returning "HI" in the console log when the corresponding button is clicked.  Any insights into why this is happening? Thanks!

[Stoyan]

Hello Jenna,

The most likely cause of the encountered issue is that when the page's scripts are executed the Telerik and Kendo UI Component aren't yet initialized because this is done by JavaScript as well.

For this reason you have to wait until the document object is ready to access elements that are populated by Telerik Components:

$(document).ready(function(){
      var inputButtons = document.querySelectorAll(".inputBtn");
});

Please give this approach a try and let me know how it works on your side.

Regards,
Stoyan
Progress Telerik

[eleven]

Of course! Makes sense. Thank you, got it working now.