Why does the click event of JavaScript not working?

Question

I got this link from a friend of mine for testing my reaction time. https://www.arealme.com/reaction-test/en/

This is a game where a red circle will appear and after random time it will turn green. I need to click as soon as it turns green. That is my reaction time.

With real reaction, my best score is 178, in case you don't believe I have attached ss

I know I can edit this 178 to any number I want. But I wanted to create a script that generated the click event as soon as the green circle appears.

I have planned to call the below function with setInterval

const clickCircle = (className)=> {
    let greenCircles = document.getElementsByClassName(className);
    if(greenCircles && greenCircles.length){
        greenCircles[0].click();
    }else{
        console.log("No circles found with name ", className)
    }
}

clickCircle("tfny-circleGreen");

The name of the class containing the green circle is tfny-circleGreen. So calling clickCircle("tfny-circleGreen") should generate a click event. But it's not.

What am I missing?

Maybe they have overridden the click function. If that's the case, how do I restore it?

Please don't ask why I want this, it's just I wanted to try it this way for fun.

I’m voting to close this question because you have posted no code, and it is unclear why you are trying to do what you are trying to do — ControlAltDel, Nov 17 '21 at 18:29
Have you tried using a [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)? You need to create an observer and attach it to the container which holds the green circle. And as soon as it appears your observer will "fire". — decho, Nov 17 '21 at 18:33
Please consider both removing irrelevant information, and adding relevant information. — Dave Newton, Nov 17 '21 at 18:37
Also, to fix you `click()` not working, use [this](https://stackoverflow.com/a/24026594/3258251) method instead. — decho, Nov 17 '21 at 18:41
I have added a code which I have written to add click functionality @ControlAltDel — Adnan Sabbir, Nov 20 '21 at 05:17

score 0 · Answer 1 · answered Nov 20 '21 at 05:28

function triggerMouseEvent (node, eventType) {
    var clickEvent = document.createEvent ('MouseEvents');
    clickEvent.initEvent (eventType, true, true);
    node.dispatchEvent (clickEvent);
}

const clickCircle = (className)=> {
    let greenCircles = document.getElementsByClassName(className);
    if(greenCircles && greenCircles.length){
        triggerMouseEvent (greenCircles[0], "mouseover");
        triggerMouseEvent (greenCircles[0], "mousedown");
        triggerMouseEvent (greenCircles[0], "mouseup");
        triggerMouseEvent(greenCircles[0], "click");
    }else{
        console.log("No circles found with name ", className)
    }
}

setInterval(()=> {
    clickCircle("tfny-circleGreen");
}, 10)

This is the complete code that works :D

The click() function was not working so I had to simulate it.

Why does the click event of JavaScript not working?

1 Answers1