How to click an element // button with this kind of html code

Question

<span id="cart-update">
   <span class="cart-button">add to cart</span>
</span>

how do I click this button

I have tried document.getElementById('cart-update').click(); and document.getElementsByClassName('cart-button').click();

Answer 1

On newer browsers you can do this to fire an event:

var event = new Event("click", {"bubbles":true, "cancelable":false});
element.dispatchEvent(event);

If you want support for older browsers, try this code that I made:

function fireEventOnElement(event_name, element, bubbles, cancelable) {
    if (typeof Event != "undefined") {
        console.log("Bla");
        var evt = new Event(event_name, {"bubbles":bubbles, "cancelable":cancelable});
        element.dispatchEvent(evt);
    } else if ("createEvent" in document) {
        var evt = document.createEvent("HTMLEvents");
        evt.initEvent(event_name, bubbles, cancelable);
        element.dispatchEvent(evt);
    } else {
        element.fireEvent("on" + event_name);
    }
}

Use it like this: fireEventOnElement("click", document.getElementById('cart-update'), true, false);

Edit: I changed code because initEvent is deprecated.

Answer 2

Try with addEventListener() and pass the event with a handler function:

getElementsByClassName() returns HTMLCollection . You have to use proper index:

 document.getElementsByClassName('cart-button')[0].addEventListener('click', function(){ alert('You have clicked'); }); 

 <span id="cart-update"> <span class="cart-button">add to cart</span> </span> 

Though I prefer querySelector() which will return the first matched element:

 document.querySelector('.cart-button').addEventListener('click', function(){ alert('You have clicked'); }); 

 <span id="cart-update"> <span class="cart-button">add to cart</span> </span> 

You can use onclick like the following:

 document.querySelector('.cart-button').onclick = function(){ alert('You have clicked'); }; 

 <span id="cart-update"> <span class="cart-button">add to cart</span> </span> 

Answer 3

getElementsByClassName return a collection , to get the element from it pass the index , and use addEventListener to add any event

 document.getElementsByClassName('cart-button')[0].addEventListener('click', function(e) { let getText = e.target.innerHTML; console.log(getText) }) 

 <span id="cart-update"> <span class="cart-button">add to cart</span> </span>