How to click a button using html or java script which is declared as div

Question

I am writing a powershell script to login to a website. I want to use the button.click functionality but I can't find the button's id. here is what I found by inspecting it.

<div tabindex="0" role="button" class="v-button v-widget default v-button-default">
  <span class="v-button-wrap">
    <span class="v-button-caption">Login</span>
  </span>
</div>
<span class="v-button-wrap">
  <span class="v-button-caption">Login</span>
</span>
<span class="v-button-caption">Login</span>

Thanks in advance

So, there seem to be 3 elements acting as buttons, which one do you want to interact with? — Scott Marcus
– Scott Marcus, Commented Feb 8, 2018 at 18:28
@ScottMarcus Thanks for the quick reply. If I can interact with 3 of them then I will try to test them one by one. Thanks — Shez ratnani
– Shez ratnani, Commented Feb 8, 2018 at 18:31

Scott Marcus · Accepted Answer · 2018-02-08 18:37:03Z

1

Given that you aren't sure which one is the one you want, you could just set up an event handler that will trigger for each and then interrogate it for something that can identify it.

// Get all the elements with a class of "v-button-caption" into an array
var buttons = Array.prototype.slice.call(document.querySelectorAll(".v-button-caption"));

// Loop over the array
buttons.forEach(function(btn){
  // Set up a click event handler
  btn.addEventListener("click", function(evt){
    // Print out some identifying information about the clicked element
    console.log("You clicked the element who's parent is: " + evt.target.parentElement.nodeName);
  });
});

<div tabindex="0" role="button" class="v-button v-widget default v-button-default">
  <span class="v-button-wrap">
    <span class="v-button-caption">Login</span>
  </span>
</div>
<span class="v-button-wrap">
  <span class="v-button-caption">Login</span>
</span>
<span class="v-button-caption">Login</span>

answered Feb 8, 2018 at 18:37

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Shez ratnani Over a year ago

Thanks Scott. I will try it and mark it as an answer if it works.

Scott Marcus Over a year ago

@Shezratnani Once you know which element is the "button", you can just call its click method: element.click().

Scott Marcus Over a year ago

@Shezratnani There are two span elements that have a parent element of span, so you'd need to do some more testing to know which of those it was. Only one of those two span elements has a parent that is also a span that, itself, has a parent that is a div, so you could test .parentNode.parentNode.

Scott Marcus Over a year ago

@Shezratnani It wouldn't be that. It would be: evt.target.parentElement.parentElement.nodeName. And, it will come back as undefined for any elements that don't have parent elements 2 levels up.

Scott Marcus Over a year ago

@Shezratnani Yes, that's the point. There is only one span in your HTML that has a parent.parent of div. So, now you know that it is the one that can be found with document.querySelector("div > span > span.v-button-caption").

|

Collectives™ on Stack Overflow

How to click a button using html or java script which is declared as div

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related