How to click event using Javascript

Question

I see the following code on the page in Internet Explorer.

<div class="TetherComponent---sailcontents appian-context-browser-ie11 DropdownWidget---tether_dropdown tether-abutted tether-abutted-left tether-element-attached-left tether-target-attached-left tether-element-attached-top tether-target-attached-bottom tether-enabled" style="left: 0px; top: 0px; position: absolute; transform: translateX(225px) translateY(223px) translateZ(0px);"><div data-reactroot="">

<ul tabindex="0" class="MenuWidget---listbox MenuWidget---relative MenuWidget---default_direction MenuWidget---inDropdownWidget DropdownWidget---dropdown_list DropdownWidget---open" id="3c6b35f223e5f624a7587ba1f9b5c5f5_list" role="listbox" style="width: 732.11px !important; min-width: 0px !important; max-width: none !important;" unselectable="on">
<li tabindex="-1" class="MenuWidgetItem---default_direction" id="3c6b35f223e5f624a7587ba1f9b5c5f5_list_0" role="option" aria-selected="true"><div>COMPANY1</div></li>
<li tabindex="-1" class="MenuWidgetItem---default_direction" id="3c6b35f223e5f624a7587ba1f9b5c5f5_list_1" role="option" aria-selected="false"><div>COMPANY1</div></li>
<li tabindex="-1" class="MenuWidgetItem---default_direction" id="3c6b35f223e5f624a7587ba1f9b5c5f5_list_2" role="option" aria-selected="false"><div>COMPANY2</div></li>
<li tabindex="-1" class="MenuWidgetItem---active MenuWidgetItem---default_direction" id="3c6b35f223e5f624a7587ba1f9b5c5f5_list_3" role="option" aria-selected="false"><div>COMPANY3</div></li></ul></div></div>

How can I click on the id=3c6b35f223e5f624a7587ba1f9b5c5f5_list_2 in this list using JavaScript?

@JackBashford Nonsense... https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click — Brad, Dec 12 '18 at 20:34
Yes I want to simulate click event but I cannot change the existing code. Any suggestions on how to do this? — BrainBusted, Dec 12 '18 at 20:35
`document.getElementById('3c6b35f223e5f624a7587ba1f9b5c5f5_list_2').click()` — Chris W., Dec 12 '18 at 20:37

score 0 · Answer 1 · answered Dec 12 '18 at 20:38

You could use document.getElementById("3c6b35f223e5f624a7587ba1f9b5c5f5_list_2").click();.

document.getElementById("3c6b35f223e5f624a7587ba1f9b5c5f5_list_2").click();

<div class="TetherComponent---sailcontents appian-context-browser-ie11 DropdownWidget---tether_dropdown tether-abutted tether-abutted-left tether-element-attached-left tether-target-attached-left tether-element-attached-top tether-target-attached-bottom tether-enabled"
  style="left: 0px; top: 0px; position: absolute; transform: translateX(225px) translateY(223px) translateZ(0px);">
  <div data-reactroot="">

    <ul tabindex="0" class="MenuWidget---listbox MenuWidget---relative MenuWidget---default_direction MenuWidget---inDropdownWidget DropdownWidget---dropdown_list DropdownWidget---open" id="3c6b35f223e5f624a7587ba1f9b5c5f5_list" role="listbox" style="width: 732.11px !important; min-width: 0px !important; max-width: none !important;"
      unselectable="on">
      <li tabindex="-1" class="MenuWidgetItem---default_direction" id="3c6b35f223e5f624a7587ba1f9b5c5f5_list_0" role="option" aria-selected="true">
        <div>COMPANY1</div>
      </li>
      <li tabindex="-1" class="MenuWidgetItem---default_direction" id="3c6b35f223e5f624a7587ba1f9b5c5f5_list_1" role="option" aria-selected="false">
        <div>COMPANY1</div>
      </li>
      <li tabindex="-1" class="MenuWidgetItem---default_direction" id="3c6b35f223e5f624a7587ba1f9b5c5f5_list_2" role="option" aria-selected="false">
        <div>COMPANY2</div>
      </li>
      <li tabindex="-1" class="MenuWidgetItem---active MenuWidgetItem---default_direction" id="3c6b35f223e5f624a7587ba1f9b5c5f5_list_3" role="option" aria-selected="false">
        <div>COMPANY3</div>
      </li>
    </ul>
  </div>
</div>

How to click event using Javascript

1 Answers1