How to click on a button declared as "role = button" inside a tag span with javascript

Question

I just starting with JavaScript, focusing in DOM, because I have to automate some human jobs in our web services.

I'm trying to to click on a button, using JavaScript code, but I can't access the click() function to this button. It's probably because, this is not actually a declared button, the button is inside a <div><span><a> tag, using role=button.

Follows part the code in HTML:

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
  <span class="ui-dialog-title" id="ui-dialog-title-jobCardDetail">text..</span>
  <a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button">
    <span class="ui-icon ui-icon-closethick">close</span>
  </a>
  ::after
</div>

How can I click on it?

"I can't access the `click()` function to this button". How are you trying to do this? There is a `click()` function on an anchor element as well... — Heretic Monkey, May 05 '20 at 19:52
Does this answer your question? [How can I trigger a JavaScript event click](https://stackoverflow.com/questions/2381572/how-can-i-trigger-a-javascript-event-click) — Heretic Monkey, May 05 '20 at 19:54

score -1 · Accepted Answer · answered May 05 '20 at 19:50

-1

You can query the element and use click() over it. Here I have queried using the classNames.

Here I have added an event listener over the button just to show that a click has occurred over the button.

const btn = document.querySelector(".ui-dialog-titlebar-close.ui-corner-all");
// test code
btn.addEventListener('click', () => {
  console.log('Click Check!');
});
// test code
btn.click();

<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<span class="ui-dialog-title" id="ui-dialog-title-jobCardDetail">text..</span>
<a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button">
<span class="ui-icon ui-icon-closethick">close</span>
</a>
::after
</div>

answered May 05 '20 at 19:50

Ashish Ranjan

12,760
5
27
51

It works! thanks! I did the same thing, but using var to declare it and doesn't work, I'm going to search about declarition of variables. – Rafael Silva May 05 '20 at 20:00
@RafaelSilva It shouldn't change when you use `var`, you can replace `const` with `var` and check. You must be making ab incorrect query. – Ashish Ranjan May 05 '20 at 20:02
Now it's work, the only difference was the ; at the final of command. should it impact? – Rafael Silva May 05 '20 at 20:07
@RafaelSilva Final command? How else were you using `.click()`? – Ashish Ranjan May 05 '20 at 20:12
I didn't realize, but I wasn't using "." inside the value of querySelector, that was the problem. Thanks! – Rafael Silva May 06 '20 at 12:54

How to click on a button declared as "role = button" inside a tag span with javascript

1 Answers1