How to Programmatically Click on an Element in JavaScript

How do I programmatically click on an element in JavaScript?

The document.createEvent documentation says that "The createEvent method is deprecated. Use event constructors instead."

So you should use this method instead:

var clickEvent = new MouseEvent("click", {
    "view": window,
    "bubbles": true,
    "cancelable": false
});

and fire it on an element like this:

element.dispatchEvent(clickEvent);

as shown here.

Programmatically click on a non-button element using javascript?

Believe it or not, for a fairly basic click, you can just call click on it (but more below): Live Example | Live Source

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Artificial Click</title>
</head>
<body>
  <div id="foo">xxxxxxx</div>
  <script>
    (function() {
      var foo = document.getElementById("foo");
      foo.addEventListener("click", function() {
        display("Clicked");
      }, false);
      setTimeout(function() {
        display("Artificial click:");
        foo.click(); // <==================== The artificial click
      }, 500);
      function display(msg) {
        var p = document.createElement('p');
        p.innerHTML = String(msg);
        document.body.appendChild(p);
      }
    })();
  </script>
</body>
</html>

You can also create the relevant type of Event object and use dispatchEvent to send it to the element:

var e = new MouseEvent("click", {
  view: window,
  bubbles: true,
  cancelable: true
});
foo.dispatchEvent(e);

This gives you the opportunity to do things like set other information (the typical pageX and pageY, for instance) on the event you're simulating.

More about the various event object types in Section 5 of the DOM Events spec.

Programmatically click on the button

For programmatically clicking button use .click () method . Also you can't define continue ( reserved keyword ) as function in js

See example =>

HTML

<div class="login-new-open-button">
<button class="btn btn-primary btn-square login-new-dialog-button" ng-click="Continue()" translate="">Continue</button>
</div>

  let element = document.querySelector('.btn');
  element.click()
  function Continue(){ // C is capital if small then keyword continue which isn't  possible
   alert("button clicked")
  }

For selecting a particular button it is preferred to use id and getElementById method instead of class

How to programmatically click Select element and trigger onChange handler?

try this, it worked for me...your problem can just be you didnt change the actual value on solution 2 before triggering change :

    function handleChange() {        alert('hello')    }

 console.log(document.getElementById('names')); document.getElementById('names').selectedIndex = 1; document.getElementById('names').dispatchEvent(new Event('change'));

    <select id="names" onchange="handleChange()">        <option>Foo</option>        <option>Bar</option>    </select>

programmatically clicking on input element

It seems you want to focus the input, rather than click it.

If that's the case, you could just use

children[0].focus();

at the console.

The thing is you won't focus the input that way, because when you call that command, the Chrome Console will be focused, not the browser viewport.

All in all, what I suggest is to run the following snippet at the console, then go back to the page (click the background, anything).

setTimeout(function() {
    console.log('focusing now!');
    children[0].focus();
}, 3000)

This code focus the children[0] input after 3s.

How to programmatically click a button and pass arguments using jQuery?

Use trigger(event, data)

$(document).ready(function() {
  $("#btnAdd").on("click", function(event, data) {
    if (data) {
      console.log('Data sent', data.sizes);
    }else{
      console.log('No data')
    }
  });
});

$(document).ready(function() {
  $("#sel").change(function() {
    var sizes = ['11', '12'];
    $("#btnAdd").trigger('click', {sizes: sizes});
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btnAdd">click me</button>
<br/>
<label>Check to send data <input type="checkbox" id="sel" /></label>

programatically click on button using javascript

I used

document.getElementsByClassName("showMoreNew")[0].click();

and it works.