如何觸發對 javascript 中元素的點擊

Question

我有以下 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>

我想隨機 select 與 class 的元素之一：c2-3、c2-4、c2-5、c2-6 並觸發點擊。

這是我到目前為止的代碼：

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

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

此時我想觸發點擊，但不確定如何操作：

 element.trigger('click'); ??

Answer 1

使用element.click(); 而不是element.trigger('click'); 而且，您需要要么只獲取一個元素，要么循環從.getElementsByClassName()返回的HTMLCollection 。

例如，循環：

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

...或者，獲取單個元素（仍然使用getElementsByClassName ）：

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

或者，您可以使用querySelector ：

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