We Keep Coding

Get element under mouse on click

I am building a Chrome extension and my goal is the following:
Once a user Ctrl clicks on a username on Reddit, I would like to capture that username on my content script page and send it over to my background page.
Here is how the html in reddit looks like for a random user, the class name is not consistent, so i can not use that.
<a class="s1vhwcq3-4 eTpNeg s1461iz-1 gWXVVu" href="/user/strasse86">u/strasse86</a>
So far I have being experimenting with the onmouseover just trying to capture the username but without success, since it always returns the first captured result.
window.onmouseover=function(e) {
var href = document.getElementsByClassName(e.target.className[i].href);
if ( typeof href != "undefined") {
if (href.includes("https://www.reddit.com/user/")){
// do more actions..
}
}
};
Any ideas please ?

I'm not sure if this is going to help but this is at least something you can look at.
window.onmouseover=function(e) {
var href = e.target.href;
if ( href) {
if (href.includes("https://www.reddit.com/user/")){
console.log('Contains reddit');
} else {
console.log('Does not contain reddit');
}
}
};
<a class="s1vhwcq3-4 eTpNeg s1461iz-1 gWXVVu" href="/user/strasse86">u/strasse86</a>
<a class="s1vhwcq3-4 eTpNeg s1461iz-1 gWXVVu" href="/user/strasse87">u/strasse87</a>
<a class="s1vhwcq3-4 eTpNeg s1461iz-1 gWXVVu" href="https://www.reddit.com/user/strasse88">u/strasse88</a>

document.onclick = (e) => {
console.log(e.target.tagName)
}
Use document.onclick and e.target give the HTML element.
Related Answer: https://stackoverflow.com/a/75472142/12298205

Calling first button on confirm of second button in javascript isn't working

I have two buttons in my html page and when someone clicks Generate button I want to save my document (the same thing save button is doing) if ok is clicked otherwise I do not want to do anything.
Js code
$("#save-application").trigger("click");
I also tried to use
document.getElementById('save-application').click();
and
$('#save-application').click();
But it isnt working.So basically I want to call my save button.Any suggestions on this?
I did tried
if (check == true) {
$("#form").submit();
return true;
}
else {
return false;
}
but form doesn't get saved

I think you missed # while querying by id $("#save-application").click();.

Instead of using trigger , you can create separate function for save functionality,
html code :
<input type="submit" value="Save" id="save-application" onclick="saveApplication();"/>
js code :
function saveApplication(){
//logic here
}
and then call saveApplication() instead of $("save-application").trigger("click");

So I'd do something like this on your input
<input id="save-application" type="submit" value="Save" onclick="saveApplication()"/>
Then modify your javascript to something like this:
function saveApplication() {
if (isChanged == true ) {
var check = confirm("Would you like to to save your changes and have a document generated?");
if (check == true) {
$("#save-application").trigger("click");
return true;
}
else { return false; }
} else {
return undefined;
}
}
Hope this helps

How to disable window.onbeforeunload from <a> tag?

First I used window.onbeforeunload on my application. It's working on over page but when click on anchor link it should be disabled Click. Any ideas? Please share. My code is below it is not working:
var submitFormOkay = false;
window.onbeforeunload = function () {
if (!submitFormOkay) {
return "Don't delay your Success. Get FREE career counselling session. Fill in the details below";
} else {
submitFormOkay = '';
}
}
<a class="navbar-brand" href="http://www.google.com">Click</a>

You could attach a global click handler on document.body which, if the click passed through an a element, sets submitFormOkay to true (or you could use another variable to bypass the check, or just clear the handler by assigning null to window.onbeforeunload), e.g.:
$(document.body).on("click", "a", function() {
submitFormOkay = true; // Or set another flag you'll check,
// or clear onbeforeunload entirely
});
Without jQuery (since I missed the jquery tag initially):
document.body.addEventListener("click", function(e) {
var element;
for (element = e.target; element != document.body; element = element.parentNode) {
if (element.tagName.toUpperCase() === "A") {
submitFormOkay = true; // Or set another flag you'll check,
// or clear onbeforeunload entirely
break;
}
}
}, false);

using jquery it can be follow:
var submitFormOkay = false;
$(window).on('beforeunload',function () {
if (!submitFormOkay) {`enter code here`
return "Don't delay your Success. Get FREE career counselling session. Fill in the details below";
} else {
submitFormOkay = '';
}
})
<a class="navbar-brand" href="http://www.google.com">Click</a>
$('a').on('click',function(e){
e.preventDefault();
$(window).off('beforeunload');
window.location = $(this).attr('href');
});

Redirecting to a different page if ID is not available

I have two buttons:
Button-A
Button-B
And some JavaScript to trigger a click event:
jQuery("#A").click(function() {
jQuery("#B").trigger('click');
return false;
});
If Button-B is not available (for example, on mobile, the button is not available), then Button-A redirects user to a different page (site.com/another-page). How can I implement this?
How can I achieve that?
Thanks

You can check the length of the jQuery object to see whether it exists
jQuery("#A").click(function () {
var $btn = jQuery("#B").trigger('click');
if(!$btn.length){
window.location = 'new location'
}
return false;
});

Check if the element exists and then add the event listener
$(function(){
if($("#B").length) { // the element exists
jQuery("#A").click(function(){
jQuery("#B").trigger('click');
return false;
});
} else { // element doesn't exist, add a different listener
jQuery("#A").click(function(){
window.location = "http://newurl.com";
});
}
});

function clickHandler(e){
var $btn = $("#B").trigger('click');
if(!$btn.length)
window.location = 'site.com/another-page';
e.preventDefault();
}
$("#A").click(clickHandler);

preventDefault() overruled by window.location

I have process in my website which contains a few steps. To navigate I have "previous" and "next" buttons. These buttons are <a> elements with an href attribute (to visit the previous and next step).
The next button works as a door to the next step, but also to validate some fields in the current step, before it continues.
So this is what happens when clicking the next button:
The href value got saved in a variable $url.
preventDefault() prevents the link from opening the URL.
There are some validation checks done.
If they return "true", the $url will be loaded in window.location.
For some steps I need to do another check to the user with a confirm box. But here comes the problem:
Problem:
When the confirm() returns "false", the user should not go to the next page. But the window.location of function 1 "overrules" the preventDefault() of function 2 now.
1. Default next button function:
$('#next_link').click(function(e) {
var url = $(this).attr('href');
e.preventDefault();
if(wiz_validate_required() && wiz_is_step_done()) {
window.location = url;
}
});
2. Confirm box function:
$('.dimensions-check').click(function(e) {
if(confirm('Have you specified the dimensions in millimeters?') == false) {
e.preventDefault();
}
});

I would do something like that. If you have any question for the code please ask!
fiddle
// These can be changed for each step if you want or not a confirmation
var needs_confirm = true;
var cb_message = 'Have you specified the dimensions in millimeters?';
$('#next_link').click(function(e) {
var url = $(this).attr('href');
e.preventDefault();
if (needs_confirm === true) {
if (confirm_box(cb_message) === true) {
redirect_window(url);
}
} else {
redirect_window(url);
}
});
function confirm_box(cb_message) {
if (confirm(cb_message) === true) {
return true;
} else {
return false;
}
}
function redirect_window(url) {
if (wiz_validate_required() && wiz_is_step_done()) {
window.location = url;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="next_link">link
</div>

Where do you called the dimension-check?
e.preventDefault() only cancel the default action of a button which is submit the form. Regardless of e.preventDefault windows.location will always redirect you.
$('#next_link').click(function(e) {
var url = $(this).attr('href');
e.preventDefault();
if(wiz_validate_required() && wiz_is_step_done()) {
//If dimension isnot prompt{
//windows.location
//}else call dimension prompt
}
});
You can put the windows.location like this:
$('.dimensions-check').click(function(e) {
if(confirm('Have you specified the dimensions in millimeters?') == true) {
window.location = url;
}
});