How to trigger a button tap with javascript?

Question

I want to automatically trigger a tap on a button with javascript.

var submitButton = document.getElementsByName('name');

I tried the following and none of them worked.

submitButton.click();

and

const touchEvent = new TouchEvent("touchstart", {
    touches: [touch],
    view: window,
    cancelable: true,
    bubbles: true,
});
submitButton.dispatchEvent(touchEvent);

Neither worked.

What are you expecting to happen? What code is expected to run when the button is clicked? — evolutionxbox, Jan 14 '22 at 08:03
how about `var submitButton = document.getElementsByName('name')[0]` ? — Saeed Shamloo, Jan 14 '22 at 08:05
Does this answer your question? [What do querySelectorAll and getElementsBy\* methods return?](https://stackoverflow.com/questions/10693845/what-do-queryselectorall-and-getelementsby-methods-return) — evolutionxbox, Jan 14 '22 at 08:08

score 0 · Answer 1 · answered Jan 14 '22 at 08:07

Document.getElementsByName() returns a NodeList of elements (not a single element).

As far as the event, click should work just fine:

for (const elm of document.getElementsByTagName('button')) {
  elm.addEventListener('click', (ev) => console.log(ev.target.textContent));
}

const buttons = document.getElementsByName('name');

for (const button of buttons) {
  button.click();
}

<div>
  <button name="name">one</button>
  <button name="name">two</button>
  <button>three</button>
</div>

score 0 · Answer 2 · answered Jan 14 '22 at 08:09

Add an id to the above button with a onClick function. Change the

document.getElementsByName('name')

to

document.getElementById('id')

Full Code:

Html:

<button id="btn" onClick="clicked()">
Click me
</button>

JS:

var btn=document.getElementById("btn");
btn.click();

function clicked() {
    console.log("Clicked");
}

If you want to trigger multiple buttons with same class:

Html:

<button class="btn" onClick="clicked()">
Click me
</button>

JS:

var btn=document.getElementsByClassName("btn");
btn[0].click();

function clicked() {
    console.log("Clicked");
}

For multiple button with same class, the return of the document.getElementsByClassName will return an array of object. In the above example, I have used the first element of that array, but if you want, you can loop through the array and trigger the click event.

score 0 · Answer 3 · answered Jan 14 '22 at 08:11

document.getElementsByName returns a NodeList Collection of elements with a given name attribute in the document.

So your submitButton will be an array. So you have to dispatch the click event with submitButton[0].click()

var submitButton = document.getElementsByName('name');
submitButton[0].click();
function submitClick() {
  console.log('submitClick')
}

<button name="name" onclick="submitClick()">Submit</button>

How to trigger a button tap with javascript?

3 Answers3