I've been attempting to utilize Tampermonkey to incorporate a popup feature on pages within the Canvas Learning Management System (LMS). Specifically, I'm focusing on a forum where there is a "Reply" option following each post. This is where I want the popup to appear. However, when I click on the "Reply" link, no popup appears. Instead, the Reply box opens as usual, but the popup is not visible.
The code snippet in question looks something like this:
<div class="entry-controls hide-if-collapsed hide-if-replying">
<div class="notification" data-bind="notification"></div>
<a role="button" class="discussion-reply-action entry-control" data-event="addReply" href="#">
<i class="icon-replied"></i>
<span aria-hidden="true">Reply</span>
<span class="screenreader-only">Reply to Comment</span>
</a>
</div>
The JavaScript code I'm trying to implement is as follows:
document.querySelectorAll('.discussion-reply-action').forEach(item => {
item.addEventListener('click', event => {
alert("Custom Popup Text Here");
})
})
In my attempts to target the correct element, I have experimented with using different classes such as .entry-controls, .notification, .entry-control, and even selectors like
span[aria-hidden="true"]I can confirm that the Tampermonkey script itself is functioning properly, as other functionalities are working as expected.
If anyone has insights into why this specific functionality is not cooperating, I would greatly appreciate any guidance. I must admit, I am relatively new to JavaScript programming.