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.

Protractor automation button click inside '_ngcontent-c6'

My application has a button, with _ngcontent-c6 and i am unable to click on it.
element(by.css("button[class*='primary-btn']")).click()
The parent of button -span >class="ng-star-inserted" is being located.
Message:
Failed: No element found using locator: By(css selector, button[class*='primary-btn'])
<b>
<span _ngcontent-c6="" title="" class="ng-star-inserted">
<button _ngcontent-c6="" class="button primary-btn">
Create New Request
</button>
</span>
</b>

Try locator by xpath :
element(by.xpath("//*[#class='button primary-btn' and contains(text(),'Create New Request')]")).click()

element(by.buttonText("Create New Request"))
or
element(by.css(".button.primary-btn"))
If none of solutions provided above won't work (xpath by #Sameer and #Frian or my) make sure to wait until your button is interactive using Protractor Expected Conditions

You can try with below code snippet as well.
element(by.xpath("//span[#class='ng-star-inserted']//child::button[#class='button
primary-btn']").click();

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

CKEDITOR selection.getStartElement() give wrong element in chrome

I have a main page which has ckeditor to perform some text editing.
ckeditor contains below elements:
<address>Address<address><pincode>123456</pincode>
I try to get focused element as
editorinstance1.focus();
var temp =editorinstance1.getSelection().getStartElement();
or
var temp =editorinstance1.document.getSelection().getStartElement();
when I click before the pincode element's first char
actually I need cursor position like
<pincode>[cursor here]123456</pincode>
the code working fine except chrome
chrome return address element.
how do I get correct element.
Just I checked with HTML it also same problem.(http://jsfiddle.net/z5ABt/2/)
I also reported in code.google.com/p/chromium/issues/detail?id=337757

This seems to be a bug in Chrome, when you click on the first character it focuses the wrong edit area. When you don't use nested contenteditable, it seems to work fine.
<panel>
<div id="address" contenteditable="true">Address</div>
<span contenteditable="true">, </span>
<div contenteditable="true" id="pin">123456</div>
</panel>
Clicking on the 1 will focus the correct edit area.
I can't find a ticket in their bug tracker about this specific issue, but they do have a number of issues regarding nested contenteditable. You might want to make a bug report.

this is a bug in chrome
you may use only like below.
<panel contenteditable="true">
<div id="address" contenteditable="true">Address</div>
<span contenteditable="true">, </span>
<span contenteditable="false"></span>
<div contenteditable="true" id="pin">123456</div>
</panel>

Controlling the preventDefault to select which default to prevent

In a page I'm working on I have this HTML (simplified version; the original is a bit more complex).
<a href="alink.php" >
<b>1</b>
<span name="aName" data-editable="text" ></span>
<span class="type">numeric</span>
</a>
Then I have a system that allows an "edit mode".
That edit to mode changes that HTML to this:
<a href="alink.php" >
<b>1</b>
<span name="aName" data-editable="text" ><input name="aName" type="text"></span><img src="ok.png"><img src="x.png"></span>
<span class="type">numeric</span>
</a>
The issue is as follows:
When the user clicks the input how can I have the carret where the user clicked without anything else happening?
For that I tried this:
If I use the preventDefault(), the user is not sent to the link but the carret is also not positioned where the user clicked.
If I use stopPropagation(), nothing is prevented, the link is clicked.
If I use both, same as preventDefault() happens.
One possible solution I thought is to get rid of the <a> and replace it with a different tag, like a <span> tag. I just would prefer not to have to do that due to how this system works. If you think that there's a nice alternative, then please state it.
No examples or answers with libraries please
Edit: My relevant js code, as requested:
this.editableElement = document.createElement('input');
this.editableElement.type = "text";
this.editableElement.onclick = function (e){
e.preventDefault();
e.stopPropagation();
}.bind(this);
this.editableElement.name = this.parent.getAttribute('name');
this.editableElement.value = this.currentText;
Edit2: jsfiddle as requested.
http://jsfiddle.net/brunoais/gZU8C/
Now try to place the caret where you clicked. You'll check that the input becomes selected, the link is not followed but the caret is not placed where you clicked.