Can i use javascript to click this selection?

Question

I am trying to use Javascript to click on the selection below.

<div class="CRControllerAddButton">
    <u colspan="2">Add Access Time</u>
</div>

And i am trying to use document.getElementById('CRControllerAddButton').click();

How come i cant get it to work? Is it because its a class? I just need to click on the div is all at least to work.

What javascript would be used in lets say console on chrome to do this?

Below is the entire code if needed where its nested.

 <div id="CRbodyaccesspolicyid" layer="0" class="CRController_body" style="width: 360px; top: 444px; left: 469px;">
  <div style="width:100%;background:#FFF;" align="center">
    <input type="text" class="CRsearchtext" id="CRSearchTextaccesspolicyid">
  </div>
  <div id="CRControllerDataaccesspolicyid" style="overflow: auto; height: 61px;">
    <table style="width: 100%;">
      <tbody>
        <tr>
          <td colspan="2"><div class="CRControllerAddButton"><u colspan="2">Add Access Time</u></div></td>
        </tr>
        <tr>
          <td title="Allowed all the time" style="width: 50%;"><input type="radio" id="chkaccesspolicyid_1" name="radioaccesspolicyid" key="1" label="Allowed all the time" style="float: left;">
            <div style="overflow: hidden; width: 134px; white-space: nowrap; padding-top: 2px; text-overflow: ellipsis;">Allowed all the time</div></td>
          <td title="Denied all the time" style="width: 50%;"><input type="radio" id="chkaccesspolicyid_2" name="radioaccesspolicyid" key="2" label="Denied all the time" style="float: left;">
            <div style="overflow: hidden; width: 134px; white-space: nowrap; padding-top: 2px; text-overflow: ellipsis;">Denied all the time</div></td>
        </tr>
        <tr>
          <td title="Allowed only during Work Hours" style="width: 50%;"><input type="radio" id="chkaccesspolicyid_3" name="radioaccesspolicyid" key="3" label="Allowed only during Work Hours" style="float: left;">
            <div style="overflow: hidden; width: 134px; white-space: nowrap; padding-top: 2px; text-overflow: ellipsis;">Allowed only during Work Hours</div></td>
          <td title="Denied during Work  hours" style="width: 50%;"><input type="radio" id="chkaccesspolicyid_4" name="radioaccesspolicyid" key="4" label="Denied during Work  hours" style="float: left;">
            <div style="overflow: hidden; width: 134px; white-space: nowrap; padding-top: 2px; text-overflow: ellipsis;">Denied during Work  hours</div></td>
          <td></td>
        </tr>
      </tbody>
    </table>
  </div>
  <div id="CRControllerButtonaccesspolicyid" align="center">
    <input type="button" class="inputbutton" value="&lt;&lt;" style="display: none;">
    <input type="button" class="inputbutton" value="&lt;" style="display: none;">
    <input type="button" class="inputbutton" value="OK">
    <input type="button" class="inputbutton" value="Cancel">
    <input type="button" class="inputbutton" value="&gt;" style="display: none;">
    <input type="button" class="inputbutton" value="&gt;&gt;" style="display: none;">
  </div>
</div>

There is no id matching "CRControllerAddButton" and as a result you attempt to click undefined. — Travis J
– Travis J, Commented Nov 7, 2013 at 17:22

Denys Séguret · Accepted Answer · 2013-11-07 17:21:07Z

2

Yes, it's because it's a class, not an id. But there is a function to get all elements having a given class: getElementsByClassName.

Use

document.getElementsByClassName('CRControllerAddButton')[0].click();

There's a [0] because as there can be more than one elements, this function returns a live nodelist which works about like an array.

If you want to click on all elements having this class, loop on the live nodelist returned by getElementsByClassName.

answered Nov 7, 2013 at 17:21

Denys Séguret

384k90 gold badges813 silver badges780 bronze badges

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

8 Comments

soniccool Over a year ago

Nada it gaveme an error TypeError: Object #<HTMLDocument> has no method 'getElementByClassName'

soniccool Over a year ago

It didnt choose the right link it opened somethign else? Any idea?

soniccool Over a year ago

Its openeing one of the other buttons i have thats already named that. How can i specifically choose this one?

Denys Séguret Over a year ago

In the HTML you show, the element with that class isn't a link.

soniccool Over a year ago

Nevermind i got it! Its document.getElementsByClassName('CRControllerAddButton')[4].click();

|

Collectives™ on Stack Overflow

Can i use javascript to click this selection?

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related