I have an element on a web page.

<div class="profile-action profile-action--lg profile-action--color-yes profile-action--filled   js-profile-header-vote-yes js-profile-header-vote" data-choice="yes" role="button">                
    <div class="profile-action__icon">                    
        <i class="icon icon--stretch">                        
            <svg class="icon__svg">                             
                <use xlink:href="#floating-action-yes"></use>                                                     
            </svg>  
        </i>                
    </div>            
</div> 

I am trying to simulate a click event by below code.

document.getElementsByClassName("js-profile-header-vote-yes")[0].click() 

It doesnt simulate any clicks on that element. What am I doing wrong?

Edit:I have tried jQuery and dispatchEvent, they dont work either. I have tried selenium as well, it works but this is not what I want.

Edit2: I dont want to handle a click event, I want to simulate a click method.

I have an element on a web page.

<div class="profile-action profile-action--lg profile-action--color-yes profile-action--filled   js-profile-header-vote-yes js-profile-header-vote" data-choice="yes" role="button">                
    <div class="profile-action__icon">                    
        <i class="icon icon--stretch">                        
            <svg class="icon__svg">                             
                <use xlink:href="#floating-action-yes"></use>                                                     
            </svg>  
        </i>                
    </div>            
</div> 

I am trying to simulate a click event by below code.

document.getElementsByClassName("js-profile-header-vote-yes")[0].click() 

It doesnt simulate any clicks on that element. What am I doing wrong?

Edit:I have tried jQuery and dispatchEvent, they dont work either. I have tried selenium as well, it works but this is not what I want.

Edit2: I dont want to handle a click event, I want to simulate a click method.

• javascript
• dom
• events
• methods

Share Improve this question Follow edited Dec 26, 2020 at 12:03 Ozan Yılmaz asked Dec 26, 2020 at 11:55 Ozan YılmazOzan Yılmaz 13022 silver badges1111 bronze badges 8

• document.getElementsByClassName("js-profile-header-vote-yes")[0].click(), note the "s" in getElements – Sudhanshu Kumar Commented Dec 26, 2020 at 11:56
• start with Creating and triggering events – Nikos M. Commented Dec 26, 2020 at 11:57
• @ashu sorry, thats actually what I am doing, it highlights the element when I write the code in the console, so I dont think I have a problem selecting the right element, I just made a mistake on my code here. – Ozan Yılmaz Commented Dec 26, 2020 at 11:59
• @NikosM. I have tried dispatchEvent(new mouseEvent("click")), it wont work either. – Ozan Yılmaz Commented Dec 26, 2020 at 12:07
• Maybe the event handler listens on an event other than click, such as mousedown, or it's listening on something other than the div, like the svg. You can use the devtools to analyze which elements have a listener attached to which events. – CherryDT Commented Dec 26, 2020 at 12:08

 |  Show 3 more ments

2 Answers 2

Sorted by: Reset to default 3

.click() works just fine, but unless there is an eventListener attached to the element nothing will occur.

I would also avoid using document.getElementsByClassname() unless you specifically need a live HTMLCollection. document.querySelector('.classname') is more appropriate here and returns a static NodeList which is more predictable as it doesn't update with the DOM.

const buttonDiv = document.querySelector('.js-profile-header-vote-yes');

buttonDiv.addEventListener('click', () => console.log('clicked'));

buttonDiv.click();

<div class="profile-action profile-action--lg profile-action--color-yes profile-action--filled   js-profile-header-vote-yes js-profile-header-vote" data-choice="yes" role="button">                
    <div class="profile-action__icon">                    
        <i class="icon icon--stretch">                        
            <svg class="icon__svg">                             
                <use xlink:href="#floating-action-yes"></use>                                                     
            </svg>  
        </i>                
    </div>            
</div> 

The modern way to simulate synthetic events (both built-in and custom) as provided by MDN's Creating and triggering events

function simulateMouseEVent(type, elem) {
  elem.dispatchEvent(new MouseEvent(type, {
    view: window,
    bubbles: true,
    cancelable: true
  }));
  return elem; // make it chainable
}

How to use:

simulateMouseEVent('click', document.getElementsByClassName("js-profile-header-vote-yes")[0]);