JavaScript not working on buttons within a Wizard step

1 Answer 22 Views
Wizard
eleven
Top achievements
Rank 1
eleven asked on 03 Aug 2022, 03:40 PM

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!

1 Answer, 1 is accepted

Sort by
1
Accepted
Stoyan
Telerik team
answered on 04 Aug 2022, 05:28 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

eleven
Top achievements
Rank 1
commented on 04 Aug 2022, 08:19 PM

Of course! Makes sense. Thank you, got it working now. 
Tags
Wizard
Asked by
eleven
Top achievements
Rank 1
Answers by
Stoyan
Telerik team
Share this question
or