We Keep Coding

Add popup based on class (most likely)

I'm trying to use Tampermonkey to add a popup on pages in the Canvas LMS. It's a forum, and after each post there is a "Reply" option, which is what I want to add the popup to. But when I click the "Reply" link, no popup appears. It opens the Reply box, as normal, but my popup is nowhere to be seen.
The code looks roughly 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 JS code I'm trying to add is:
document.querySelectorAll('.discussion-reply-action').forEach(item => {
item.addEventListener('click', event => {
alert("Popup text here");
})
})
In addition to .discussion-reply-action, I've tried using .entry-controls, .notification, .entry-control, even stuff like span[aria-hidden="true"]. Nothing seems to work.
I know the Tampermonkey script itself is applying correctly, because it has other functionality that is showing up as usual.
Any idea why this bit isn't working for me? I'm a complete JS noob, for what that's worth.

This got answered in the replies, but just wanted to formally note that it came down to delaying my code injection. I was trying to attach to elements that loaded after the doc. Once I got behind them, it worked fine.

Showing only a few elements, others can navigate using the arrows

Good moorning.
I have got a variable $awards = array which contents some data from database from specific users. This variable extracts a set of awards to result set of users.
<div>
<span class="zoom-gallery" n:foreach="$awards as $award" n:if="$award['user_id'] == $solver['id']">
<a href="{$basePath}{$award['link']}">
<img src="{$basePath}{$award['preview']}"/>
</a>
</span>
</div>
However, some users have so much awards -> I would like to show first 4 awards between two arrows allowing going through the other.
Example: arrow_prev AWARD1 AWARD2 AWARD3 AWARD4 arrow_next
Could you help me how to do it? I know it's solvable through javascript but I dont know javascrip much (beginner). Or - does exist some plugin? Thank you

Clicking a button on a webpage using JQuery or Javascript

I've been rummaging through the web to how to click buttons for a project I'm working on with Javascript+JQuery(Still not very good). Luckily I was able to find my answer and figured out how to click basic HTML buttons that looked like this(Cut off some of the code just to get the point across).
<div class="ui-block-a">
<input type="submit" value="Buy Now" data-theme="d">
</div>
But now I've come across a button like this.
<div id="BuyWithRobux">
<div data-expected-currency="1" data-asset-type="T-Shirt" class="btn-primary btn-medium PurchaseButton " data-se="item-buyforrobux" data-item-name="Donations" data-item-id="170938328" data-expected-price="2" data-product-id="20832770" data-expected-seller-id="180359" data-bc-requirement="0" data-seller-name="Clone3102">
Buy with R$
<span class="btn-text">Buy with R$</span>
</div>
</div>
Just based off of what I know I don't think I can use what I used to click the last button which was...
$("input[type='submit']").click();
So my question is how can I click this "button"? I've tried using my old code on it to no avail. I rather not use Selenium, or anything if at all possible. Could anyone help me out with this? If you need anymore information just say what and I'll do my best to provide it, fairly new to this so don't know what to include sadly.
Thank you in advance.

By "clicking this button" If you meant to trigger a click on div#BuyWithRobux , You can do so like
$("#BuyWithRobux").click();
or
$("#BuyWithRobux").trigger("click");
The syntax for triggering a click remains the same, all you've to do is to use the right selector to target the element on which you need to trigger the event.
You can learn more about jQuery selectors here

How to general new text boxes upon clicking a button?

I have around 600 Records in a table. These are the names of Items as displayed in the image. To issue Items to users, we at the Stationery first enter the Quantity of each Item to be issued and then submit the form.
What I want to do is this:
I want this form to be dynamic. We should enter the name of the Item (This I will do using Autocomplete). Then We want to enter the Quantity, and then Remarks. After finishing one such Record, I want to display a button Make another entry. And this button should generate three text boxes: Item, Quantity, and Remarks ... and again upon clicking the same button, one more such row should be generated...
Just like in Android mobile phone, a single contact can have many phone numbers. And upon entering one phone number, there comes a button which says Add another phone number. I want to do something like this.
Please help.
As of now, I am displaying all the records in the table in an HTML form using PHP loops, which is a tedious task and a bad design.
Can you please tell me if there is any way out.
Thanks in advance.

You can use jQuery to add the elements on click of a certain button.
As example:
html:
<html>
<head>
...
</head>
<body>
<div class="items">
<div class="item1">
<input type="text" name="...">
....
</div>
</div>
<button class="addElements">Add Item</button>
</body>
</html>
javascript/jquery:
$('button.addElements').on('click', function() {
$('<div class="item2>....</div>').appendTo('.items');
});
In each itemX div you will put your input's and everything you need for one item.

Dynamic Content with Ajax Using a Dropdown Menu

what I am trying to do is have a specific div from another page being loaded into a div when you click on a dropdown menu.
Here is my dropdown menu code and the div #location-info is where I want the info pulled into.
<div class="nav-location">
<ul>
<li class="locationhead">Select Locations
<ul id="location-options">
<li>Atikokan</li>
<li>Dryden</li>
<li>Emo</li>
<li>Fort Frances</li>
<li>Rainy River</li>
<li>Red Lake</li>
<li>Sioux Lookout</li>
<li>Thunder Bay</li>
</ul>
</li>
</ul>
</div>
<div id="location-info"></div>
Now here is the script I have in the footer of my site to try to pull in the content from the a href of each of the items in that dropdown...
$('#location-options').on('click', 'a', function (event) {
$el = $(event.target);
$.ajax({
type: 'GET',
url: $el.attr('href'),
success: function (html) {
$('#location-info').html(html);
}
});
return false;
});
I would think that this would pull in the info from the div location-info from each of the other pages in the dropdown when you click so the info changes and you get the location info for example, this is the page at modocom.ca/gillons/emo which I want to pull in the info from the location-div
<div id="location-info">
<div class="sevencol">
<h4>Gillons | Emo</h4><p>74 Front St<br />Emo, ON P0W 1E0</p>
<p>Phone: (807) 482-2146<br />Fax: (807) 482-2757</p>
</div>
<div class="fivecol last">
<h4>Office Hours</h4><p>Monday-Friday<br />8:30am - 5:00pm</p>
</div>
</div>
So that HTML above is what I would be trying to pull into the location-info div when someone clicks on Emo and then so on it would change when you select different location from the Dropdown.
I am using Wordpress but this stuff is all hardcoded in.
Struggling with this one hopefully someone can lend a helping hand, can seem to wrap my head around it.

I think that your problem is that in line $('#location-info').html(html); you're pulling entire site content from selected link, and stuffing it into your <div>.
Instead you should take only <div id="location-info"> from html variable.
Also normal behaviour of click is not being prevented here - it simply follows the link. Also $el.attr('href') will not return a string with link, but an empty object, check for yourself.
EDIT:
I was able to bind the 'click' event to each link, so instead of following the link, it simply displays href in your div, and then makes ajax request.
This is my JSFiddle example:
http://jsfiddle.net/mUThR/51/
Ajax request fails, but in console i can see that it's due to Proxy 407 error, access denied; but it should work from your machine. If it does, you still need to extract proper div from returned html.
Cheers.