How to trigger a click on an element in javascript

Question

I have the following Html:

<div class="box-row">
    <div class="box c2-3">
        <div class="box-overlay"></div>
        <div class="box-letter"></div>
    </div>
    <div class="box c2-4">
        <div class="box-overlay"></div>
        <div class="box-letter"></div>
    </div>
    <div class="box c2-5">
         <div class="box-overlay"></div>
         <div class="box-letter"></div>
    </div>
    <div class="box c2-6 trr">
         <div class="box-overlay trr"></div>
         <div class="box-letter"></div>
    </div>
 </div>

I want to randomly select one of the elements with class: c2-3, c2-4, c2-5, c2-6 and trigger a click.

This is the code I have thus far:

    var map = [
        'c2-3', 'c2-4', 'c2-5', 'c2-6',
    ];

    var x = Math.floor((Math.random() * 4));
    var element = document.getElementsByClassName(map[x]);

At this point I want to trigger the click and am unsure how to do it:

 element.trigger('click'); ??

getElementsByClassName() - note the s in elements. This method returns a collection of elements. You cannot call .trigger() or .click() on a collection; you must first target a specific element in the collection. — Tyler Roper
– Tyler Roper, Commented Sep 25, 2019 at 19:58
Possible duplicate of click() command not working on document.getElementsByClassName() — Tyler Roper
– Tyler Roper, Commented Sep 25, 2019 at 20:01
Ah, and since it is a class I am looking for, there could be multiple classes... — HappyCoder
– HappyCoder, Commented Sep 25, 2019 at 20:02
@TylerRoper That thread actually solved my problem. I changed getElementsByClassName with querySelector and it now works. Thanks! — HappyCoder
– HappyCoder, Commented Sep 25, 2019 at 20:06
querySelector/querySelectorAll is easier (and fun fact, has better browser support) — rlemon
– rlemon, Commented Sep 25, 2019 at 20:06

BCDeWitt · Accepted Answer · 2019-09-25 20:08:51Z

6

Use element.click(); instead of element.trigger('click'); but also, you need to either get only a single element, or loop over the returned HTMLCollection from .getElementsByClassName().

For example, to loop:

var elements = document.getElementsByClassName(map[x])
elements.forEach(element => element.click())

...Or, to get a single element (still using getElementsByClassName):

var element = document.getElementsByClassName(map[x])[0]
element.click()

Alternatively, you can use querySelector:

var element = document.querySelector(`.${map[x]}`)
element.click()

edited Sep 25, 2019 at 20:08

answered Sep 25, 2019 at 19:56

BCDeWitt

4,8232 gold badges24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

HappyCoder Over a year ago

Tried it, I get the following error: "Uncaught TypeError: element.click is not a function"

BCDeWitt Over a year ago

So, the JS you provided is actually the entirety of your JS code?

HappyCoder Over a year ago

It is watered down a bit for brevity.

BCDeWitt Over a year ago

Yeah, that was my bad, I assumed you were getting a single element in a hidden step, at first.

Marco Balestra · Accepted Answer · 2025-01-05 20:18:05Z

0

The getElementsByClassName() method returns an array-like object of all child elements with all the given class name(s).
I'd rather consider using querySelectorAll(), but the output is the same: in any case a node collection is returned.

Cycle on such nodes, and if you want to use a "modern" there is dispatchEvent() instead of click():

document.getElementsByClassName(map[x]).forEach( el => {
    el.dispatchEvent( new MouseEvent(
        'click',
        { view: window, bubbles: true, cancelable: true }
    ));
});

Should you want to be more precise you could replace

document.getElementsByClassName(map[x])

with:

document.querySelectorAll('div.box-row > .box.'+map[x])

edited Jan 5 at 20:18

answered Jan 5 at 20:01

Marco Balestra

11 bronze badge

Collectives™ on Stack Overflow

How to trigger a click on an element in javascript

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related