Can't simulate a click event with javascript in "web application" - javascript

I have searched a lot of information about this but have not found the solution yet.
My problem is the following, I am creating an extension to speed up the movement through several web pages, I have managed it with many of them, but I have come to some where I cannot simulate a click with Javascript and I don't know how to do it.
One of the pages is this: https://sports.betway.es/es/sports/in-play The page is in Spanish domain, therefore I do not know if they can access it from another country (without vpn), although I think that with domain ".com" it works.
The code is as follows, it's pretty simple.
var deportesActivos = document.getElementsByClassName("categoryListItemWrapper contentSelectorItemButton")
for(let i=0;i<deportesActivos.length;i++){
let nombre = deportesActivos[i].lastChild.firstChild.innerText
if(nombre == data.deporte){
deportesActivos[i].click()
}
}
deportesActivos I collect the DIV elements with that class from the page.
deportesActivos[i].lastChild.firstChild.innerText I extract the text of each element
if(nombre == data.deporte){
deportesActivos[i].click()
}
When it matches, click to enter the link.
The problem is that the click does not simulate me.
I have bought exactly the element that you click on, I have clicked manually and it works, I have tried to click on other elements of the web page and it does not work, I have tried to give a "listener on click" to the element and it does not work either.
The HTML of the page is as follows:Image with HTML Code of the website
I don't know if this helps but on website build with Ionic app neither works

The click event does not fully simulate a user click. It just fires the onClick handler on the element that you are targeting (and any parents).
If your are just redirecting to a new URL when the button is clicked, you could just do that in your loop instead.
// get the links, not the buttons
var deportesActivos = document.getElementsByClassName("categoryListItemWrapper contentSelector");
for (let i=0; i < deportesActivos.length; i++) {
// Drill down one extralevel to get the button text
let nombre = deportesActivos[i].firstChild.lastChild.firstChild.innerText;
if (nombre === data.deporte) {
// Redirect to the href in the link
window.location.href = deportesActivos[i].href;
}
}

Related

Different links with target = _blank works only twice

I have a code that covers the whole content with a link (target= _blank), then turns that link's display into none, brings another link and so on.
In my browser everything works just fine but I got a complaint about how only 2 of these links work.
No matter which link they click, after the second one it doesn't work.
Did the same thing with addEventListener and onclick but they caused different problems so therefore I used "a href".
I only can use JavaScript to create these elements and unable to use plain HTML.
I searched about browser's behaviors on multiple new tab or window but couldn't find anything useful.
This is how I create the links:
var hidden= document.createElement("a");
hidden.href="somelink";
hidden.style.height="100%";
hidden.style.width="100%";
hidden.target="_blank";
hidden.style.display="none";
container.appendChild(hidden);
And to make them appear, I add an event listener to a video and make them appear and disappear the right time.
video.addEventListener("timeupdate",function () {
if(video.currentTime>=3 && video.currentTime<5){
hidden.style.display="block";
} else if(video.currentTime>=5 && video.currentTime<6) {
hidden.style.display="none";
}
}
Is it a browser behavior that blocks the multiple new tabs or should I look for the answer in something else in my code?

Unable to open link with jQuery click()

I want to open some relevant links after a button click by user. All these links have to open in a new tab.
I tried using the following code but it does not open the links:
$("div.relevant-links").on('click', function() {
var count = 0;
var relevant_links = $(this);
function open_link() {
if (count < relevant_links.siblings("a.sections").length) {
relevant_links.siblings("a.sections").eq(count).css({
background: 'yellowgreen'
});
relevant_links.siblings("a.sections").eq(count).click();
count++;
} else {
clearInterval(link_interval);
}
}
open_link();
var link_interval = setInterval(open_link, 5000);
});
All other code works fine because I can see the background color of the link change. However, the click() method does not seem to work.
How can I trigger the click on different links? All the links have to open in a new tab. I have set their target attributes to _blank.
First of all, remove the interval, if you're going recursive, use setTimeout, if there's even a minor flaw in your code you've got yourself an annoying memory leak.
Second, when you want to open a webpage, new tab or not. You'll need to do it right after a user initiated action like a click. If you're gonna trigger it again after 5 seconds it will get blocked in modern browsers.
Third, you could also retrieve the href of the links and perform a window.open('your href here', '_blank') instead of triggering the click event.
Last, don't open a bunch of "relevant" links. You're not making anyone happy with that. Especially not a new one every 5 seconds!

Tracking multiple clicks on the same element

Looking for a way to track if an element has been clicked multiple times (for example, a user clicks "Submit" button several times to place an order).
We are doing some work redeveloping a website and in our UX research we found that people don't download PDFs from the site because the link behind the button is broken. We noticed that people tend to click the button several times before giving up, yet some still manage to download the PDF.
In order to show our changes to code have improved site performance and user experiences, we want to show that these "multiple clicks" have decreased.
Since the site uses Google Analytics, I have tried to create a variable in GTM that counts clicks on the same click element (which doesn't work):
function() {
var the_div = {{Click Element}};
var clickCount = 0;
return clickCount;
}
I expect the output to be a count of the times I've clicked on the Click Element (1, 2, 3, etc....)
Try like this.
Define a varable for count. and on each click increment it.
var i = 1;
$('#elem').on('click',function(){
console.log(i);
i++;
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="elem">click here</div>
sorry for the delay in responding.
We found a solution.
As Piertstorff pointed out, the variable sets clickCount to zero every time it is called. The solution, was to build a custom HTML tag (that runs JS) - not a variable - that fires on a Page Load Trigger and listens for multiple clicks within a 2-second timeframe. The HTML tag then passes an event to the DataLayer and stored in a variable.
That variable (signalling multiple clicks occurred) activates a trigger for another tag that passes the {{Click Classes}} variable to GA
Use javascript variable with global scope
<script>
countClicks = 0;
function clickCountFunction() {
countClicks++;
}
</script>
Add onClick attribute in button and call clickCountFunction() in it

Detect that the browser is loading a new page to emphasize that something is happening

While UX-testing my various websites, I've often noticed that people have trouble identifying whether their "clicks" are actually doing anything.
There are multiple UI ways to handle this, like animating buttons to show they have been pushed, but I'd like to explore an alternative option.
I would like to animate my page with a loader when the browser begins to load a new page.
Is this "loading new page" status available in JS ? Can we use it for this sort of thing ? Are there any libraries built for this ?
Edit : many seem to confuse my question, which is understandable. So here's an attempt to clear things up.
While on page A, I want to detect that a user has requested page B and is waiting for a server response. I would like to animate page A while waiting for the server response and first paint of page B.
You can use jquery.
https://learn.jquery.com/using-jquery-core/document-ready/
You can show some image before loading some contents and hide it after document load.
many libraries are available based on your language of implementation.
for a basic example, check W3schools
I assume that only <a> tags redirect to page B so you can place a listener to all those <a> tags that show the animation and hide the rest of the page changing the state of the 'visibility style' with object.style.visibility = "visible|hidden|collapse|initial|inherit" before it redirects to B.
For example:
var linkList = document.getElementsByTagName("a"); // don't use it for all <a> tags.
// Only for those that redirects to B
for(let i=0; i<linkList.length; i++){
linkList[i].addEventListener("click", function(e){
e.preventDefault();
var href = this.getAttribute('href');
var target = this.getAttribute('target') || "_self";
// show loading animation in here
window.open(href,target);
},false);
}

Jquery execute mouse click after page redirect

I have a blog category page to which I want to re direct from my one of my blog posts page and I want to simulate mouse click events which tells which category do they belong to i.e mouse click on the appropriate category in the blog page.I have achieved this on the blog page itself by means of jquery as follows,
function categoryNav(){
window.onload() = function(){
$('#item-0').click();
$('#item-0-0').click();
};
}
This works fine standalone on the page, but somehow I am not able to combine this with a href linking from my posts page i.e after a link click from the page this function is executed, in that case where the click always gets executed first before the redirect.
I have tried window.onload,document.onload,document.ready but nothing seems to work correctly.
What am I missing here?
On the first click, generate a url in the form www.myblog.com/?item-0. Then, on the target page (on DOM ready):
s = location.search;
if(s != '') {
var split = s.split('?');
var cat = split[1];
$('#' + cat + '').click();
}
In the case above, you should trigger a click on #item-0.

Categories