ERROR TypeError：无法获取未定义或空引用的属性'0'-在控制台中的HTML_Element上单击（）时

问题描述 投票：0回答：1

尝试在控制台中执行以下代码时出现错误：

document.getElementsByClassName("pi pi-chevron-right")[0].click();

代码执行了应有的工作，但是每次执行click（）方法时都会输出错误。

错误消息：

document.getElementsByClassName("pi pi-chevron-right")[0].click();
undefined
ERROR TypeError: Unable to get property '0' of undefined or null reference
   "ERROR"
   {
      [functions]: ,
      __proto__: { },
      description: "Unable to get property '0' of undefined or null reference",
      message: "Unable to get property '0' of undefined or null reference",
      name: "TypeError",
      number: -2146823281,
      stack: "TypeError: Unable to get property '0' of undefined or null reference
   at e.prototype.onClick (https://ghc.connect.pwc.com/main.058cd423c1cf54028b93.js:1:5086814)
   at Anonymous function (https://ghc.connect.pwc.com/main.058cd423c1cf54028b93.js:1:5106159)
   at handleEvent (https://ghc.connect.pwc.com/main.058cd423c1cf54028b93.js:1:1197790)
   at handleEvent (https://ghc.connect.pwc.com/main.058cd423c1cf54028b93.js:1:1208980)
   at Uf (https://ghc.connect.pwc.com/main.058cd423c1cf54028b93.js:1:1167505)
   at Anonymous function (https://ghc.connect.pwc.com/main.058cd423c1cf54028b93.js:1:1173798)
   at Anonymous function (https://ghc.connect.pwc.com/main.058cd423c1cf54028b93.js:1:2655047)
   at e.prototype.invokeTask (https://ghc.connect.pwc.com/main.058cd423c1cf54028b93.js:1:68805)
   at onInvokeTask (https://ghc.connect.pwc.com/main.058cd423c1cf54028b93.js:1:1131800)
   at e.prototype.invokeTask (https://ghc.connect.pwc.com/main.058cd423c1cf54028b93.js:1:68805)",
      Symbol()_i.t1si0nbd5nz: undefined,
      Symbol()_j.t1si0nbd5nz: undefined,
      Symbol()_l.t1si0nbd5nz: undefined,
      Symbol(INITIAL_VALUE)_h.t1si0nbd5nz: undefined,
      Symbol(observable)_n.t1si0nbd5nz: undefined,
      Symbol(react.element)_m.t1si0nbd5nz: undefined,
      Symbol(rxSubscriber)_g.t1si0nbd5nz: undefined,
      Symbol(rxSubscriber)_o.t1si0nbd5nz: undefined,
      Symbol(test)_k.t1si0nbd5nz: undefined
   }

我想单击以下用蓝色标记的UI元素“>”：

Datepicker

这是UI元素的代码如下：

<div class="ui-datepicker-group ui-widget-content ng-tns-c62-13 ng-star-inserted">
  <div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
    <!----><a tabindex="0" class="ui-datepicker-prev ui-corner-all ng-tns-c62-13 ng-star-inserted"><span class="pi pi-chevron-left"></span></a>
    <!----><a tabindex="0" class="ui-datepicker-next ui-corner-all ng-tns-c62-13 ng-star-inserted"><span class="pi pi-chevron-right"></span></a>
    <div class="ui-datepicker-title">
      <!----><span class="ui-datepicker-month ng-tns-c62-13 ng-star-inserted">November</span>
      <!---->
      <!---->
      <!----><span class="ui-datepicker-year ng-tns-c62-13 ng-star-inserted">2019</span></div>
  </div>
  <!---->
  <div class="ui-datepicker-calendar-container ng-tns-c62-13 ng-star-inserted">
    <table class="ui-datepicker-calendar">
      <thead class="ng-tns-c62-13">
        <tr class="ng-tns-c62-13">
          <!---->
          <th class="ng-tns-c62-13 ng-star-inserted" scope="col"><span class="ng-tns-c62-13">Su</span></th>
          <th class="ng-tns-c62-13 ng-star-inserted" scope="col"><span class="ng-tns-c62-13">Mo</span></th>
          <th class="ng-tns-c62-13 ng-star-inserted" scope="col"><span class="ng-tns-c62-13">Tu</span></th>
          <th class="ng-tns-c62-13 ng-star-inserted" scope="col"><span class="ng-tns-c62-13">We</span></th>
          <th class="ng-tns-c62-13 ng-star-inserted" scope="col"><span class="ng-tns-c62-13">Th</span></th>
          <th class="ng-tns-c62-13 ng-star-inserted" scope="col"><span class="ng-tns-c62-13">Fr</span></th>
          <th class="ng-tns-c62-13 ng-star-inserted" scope="col"><span class="ng-tns-c62-13">Sa</span></th>
        </tr>
      </thead>
      <tbody class="ng-tns-c62-13">
        <!---->
        <tr class="ng-tns-c62-13 ng-star-inserted">
          <!---->
          <td class="ng-tns-c62-13 ui-datepicker-other-month ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <!----><span class="ui-state-default ui-state-disabled ng-tns-c62-13 ng-star-inserted"> 27 </span>
            <!---->
          </td>
          <td class="ng-tns-c62-13 ui-datepicker-other-month ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <!----><span class="ui-state-default ui-state-disabled ng-tns-c62-13 ng-star-inserted"> 28 </span>
            <!---->
          </td>
          <td class="ng-tns-c62-13 ui-datepicker-other-month ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <!----><span class="ui-state-default ui-state-disabled ng-tns-c62-13 ng-star-inserted"> 29 </span>
            <!---->
          </td>
          <td class="ng-tns-c62-13 ui-datepicker-other-month ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <!----><span class="ui-state-default ui-state-disabled ng-tns-c62-13 ng-star-inserted"> 30 </span>
            <!---->
          </td>
          <td class="ng-tns-c62-13 ui-datepicker-other-month ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <!----><span class="ui-state-default ui-state-disabled ng-tns-c62-13 ng-star-inserted"> 31 </span>
            <!---->
          </td>
          <td class="ng-tns-c62-13 ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <a class="ui-state-default ng-tns-c62-13 ng-star-inserted" draggable="false">
              <!---->
              <!---->1
              <!---->
            </a>
            <!---->
            <!---->
          </td>
          <td class="ng-tns-c62-13 ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <a class="ui-state-default ng-tns-c62-13 ng-star-inserted" draggable="false">
              <!---->
              <!---->2
              <!---->
            </a>
            <!---->
            <!---->
          </td>
        </tr>
        <tr class="ng-tns-c62-13 ng-star-inserted">
          <!---->
          <td class="ng-tns-c62-13 ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <a class="ui-state-default ng-tns-c62-13 ng-star-inserted" draggable="false">
              <!---->
              <!---->3
              <!---->
            </a>
            <!---->
            <!---->
          </td>
          <td class="ng-tns-c62-13 ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <a class="ui-state-default ng-tns-c62-13 ng-star-inserted" draggable="false">
              <!---->
              <!---->4
              <!---->
            </a>
            <!---->
            <!---->
          </td>
          <td class="ng-tns-c62-13 ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <a class="ui-state-default ng-tns-c62-13 ng-star-inserted" draggable="false">
              <!---->
              <!---->5
              <!---->
            </a>
            <!---->
            <!---->
          </td>
          <td class="ng-tns-c62-13 ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <a class="ui-state-default ng-tns-c62-13 ng-star-inserted" draggable="false">
              <!---->
              <!---->6
              <!---->
            </a>
            <!---->
            <!---->
          </td>
          <td class="ng-tns-c62-13 ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <a class="ui-state-default ng-tns-c62-13 ng-star-inserted" draggable="false">
              <!---->
              <!---->7
              <!---->
            </a>
            <!---->
            <!---->
          </td>
          <td class="ng-tns-c62-13 ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <a class="ui-state-default ng-tns-c62-13 ng-star-inserted" draggable="false">
              <!---->
              <!---->8
              <!---->
            </a>
            <!---->
            <!---->
          </td>
          <td class="ng-tns-c62-13 ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <a class="ui-state-default ng-tns-c62-13 ng-star-inserted" draggable="false">
              <!---->
              <!---->9
              <!---->
            </a>
            <!---->
            <!---->
          </td>
        </tr>
        <tr class="ng-tns-c62-13 ng-star-inserted">
          <!---->
          <td class="ng-tns-c62-13 ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <a class="ui-state-default ng-tns-c62-13 ng-star-inserted" draggable="false">
              <!---->
              <!---->10
              <!---->
            </a>
            <!---->
            <!---->
          </td>
          <td class="ng-tns-c62-13 ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <a class="ui-state-default ng-tns-c62-13 ng-star-inserted" draggable="false">
              <!---->
              <!---->11
              <!---->
            </a>
            <!---->
            <!---->
          </td>
          <td class="ng-tns-c62-13 ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <a class="ui-state-default ng-tns-c62-13 ng-star-inserted" draggable="false">
              <!---->
              <!---->12
              <!---->
            </a>
            <!---->
            <!---->
          </td>
          <td class="ng-tns-c62-13 ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <a class="ui-state-default ng-tns-c62-13 ng-star-inserted" draggable="false">
              <!---->
              <!---->13
              <!---->
            </a>
            <!---->
            <!---->
          </td>
          <td class="ng-tns-c62-13 ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <a class="ui-state-default ng-tns-c62-13 ng-star-inserted" draggable="false">
              <!---->
              <!---->14
              <!---->
            </a>
            <!---->
            <!---->
          </td>
          <td class="ng-tns-c62-13 ui-datepicker-today ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <a class="ui-state-default ng-tns-c62-13 ui-state-highlight ng-star-inserted" draggable="false">
              <!---->
              <!---->15
              <!---->
            </a>
            <!---->
            <!---->
          </td>
          <td class="ng-tns-c62-13 ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <a class="ui-state-default ng-tns-c62-13 ng-star-inserted" draggable="false">
              <!---->
              <!---->16
              <!---->
            </a>
            <!---->
            <!---->
          </td>
        </tr>
        <tr class="ng-tns-c62-13 ng-star-inserted">
          <!---->
          <td class="ng-tns-c62-13 ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <a class="ui-state-default ng-tns-c62-13 ng-star-inserted" draggable="false">
              <!---->
              <!---->17
              <!---->
            </a>
            <!---->
            <!---->
          </td>
          <td class="ng-tns-c62-13 ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <a class="ui-state-default ng-tns-c62-13 ng-star-inserted" draggable="false">
              <!---->
              <!---->18
              <!---->
            </a>
            <!---->
            <!---->
          </td>
          <td class="ng-tns-c62-13 ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <a class="ui-state-default ng-tns-c62-13 ng-star-inserted" draggable="false">
              <!---->
              <!---->19
              <!---->
            </a>
            <!---->
            <!---->
          </td>
          <td class="ng-tns-c62-13 ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <a class="ui-state-default ng-tns-c62-13 ng-star-inserted" draggable="false">
              <!---->
              <!---->20
              <!---->
            </a>
            <!---->
            <!---->
          </td>
          <td class="ng-tns-c62-13 ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <a class="ui-state-default ng-tns-c62-13 ng-star-inserted" draggable="false">
              <!---->
              <!---->21
              <!---->
            </a>
            <!---->
            <!---->
          </td>
          <td class="ng-tns-c62-13 ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <a class="ui-state-default ng-tns-c62-13 ng-star-inserted" draggable="false">
              <!---->
              <!---->22
              <!---->
            </a>
            <!---->
            <!---->
          </td>
          <td class="ng-tns-c62-13 ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <a class="ui-state-default ng-tns-c62-13 ng-star-inserted" draggable="false">
              <!---->
              <!---->23
              <!---->
            </a>
            <!---->
            <!---->
          </td>
        </tr>
        <tr class="ng-tns-c62-13 ng-star-inserted">
          <!---->
          <td class="ng-tns-c62-13 ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <a class="ui-state-default ng-tns-c62-13 ng-star-inserted" draggable="false">
              <!---->
              <!---->24
              <!---->
            </a>
            <!---->
            <!---->
          </td>
          <td class="ng-tns-c62-13 ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <a class="ui-state-default ng-tns-c62-13 ng-star-inserted" draggable="false">
              <!---->
              <!---->25
              <!---->
            </a>
            <!---->
            <!---->
          </td>
          <td class="ng-tns-c62-13 ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <a class="ui-state-default ng-tns-c62-13 ng-star-inserted" draggable="false">
              <!---->
              <!---->26
              <!---->
            </a>
            <!---->
            <!---->
          </td>
          <td class="ng-tns-c62-13 ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <a class="ui-state-default ng-tns-c62-13 ng-star-inserted" draggable="false">
              <!---->
              <!---->27
              <!---->
            </a>
            <!---->
            <!---->
          </td>
          <td class="ng-tns-c62-13 ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <a class="ui-state-default ng-tns-c62-13 ng-star-inserted" draggable="false">
              <!---->
              <!---->28
              <!---->
            </a>
            <!---->
            <!---->
          </td>
          <td class="ng-tns-c62-13 ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <a class="ui-state-default ng-tns-c62-13 ng-star-inserted" draggable="false">
              <!---->
              <!---->29
              <!---->
            </a>
            <!---->
            <!---->
          </td>
          <td class="ng-tns-c62-13 ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <a class="ui-state-default ng-tns-c62-13 ng-star-inserted" draggable="false">
              <!---->
              <!---->30
              <!---->
            </a>
            <!---->
            <!---->
          </td>
        </tr>
        <tr class="ng-tns-c62-13 ng-star-inserted">
          <!---->
          <td class="ng-tns-c62-13 ui-datepicker-other-month ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <!----><span class="ui-state-default ui-state-disabled ng-tns-c62-13 ng-star-inserted"> 1 </span>
            <!---->
          </td>
          <td class="ng-tns-c62-13 ui-datepicker-other-month ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <!----><span class="ui-state-default ui-state-disabled ng-tns-c62-13 ng-star-inserted"> 2 </span>
            <!---->
          </td>
          <td class="ng-tns-c62-13 ui-datepicker-other-month ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <!----><span class="ui-state-default ui-state-disabled ng-tns-c62-13 ng-star-inserted"> 3 </span>
            <!---->
          </td>
          <td class="ng-tns-c62-13 ui-datepicker-other-month ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <!----><span class="ui-state-default ui-state-disabled ng-tns-c62-13 ng-star-inserted"> 4 </span>
            <!---->
          </td>
          <td class="ng-tns-c62-13 ui-datepicker-other-month ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <!----><span class="ui-state-default ui-state-disabled ng-tns-c62-13 ng-star-inserted"> 5 </span>
            <!---->
          </td>
          <td class="ng-tns-c62-13 ui-datepicker-other-month ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <!----><span class="ui-state-default ui-state-disabled ng-tns-c62-13 ng-star-inserted"> 6 </span>
            <!---->
          </td>
          <td class="ng-tns-c62-13 ui-datepicker-other-month ng-star-inserted">
            <!---->
            <!---->
            <!---->
            <!----><span class="ui-state-default ui-state-disabled ng-tns-c62-13 ng-star-inserted"> 7 </span>
            <!---->
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

当执行以下命令时，我得到一个HTML元素作为输出：

document.getElementsByClassName("pi pi-chevron-right")[0];
<span class="pi pi-chevron-right"></span>

我该怎么做才能使错误不再显示在控制台中？

我在单击它之前尝试用一个字符串初始化HTML元素，但是没有用。

document.getElementsByClassName("pi pi-chevron-right")[0].innerHTML="Test";

document.getElementsByClassName("pi pi-chevron-right")[0]

document.getElementsByClassName("pi pi-chevron-right")[0].click()

document.getElementsByClassName("pi pi-chevron-right")[0]
<span class="pi pi-chevron-right"></span>
document.getElementsByClassName("pi pi-chevron-right")[0]
<span class="pi pi-chevron-right"></span>
document.getElementsByClassName("pi pi-chevron-right")[0].innerHTML="Test";
"Test"
document.getElementsByClassName("pi pi-chevron-right")[0].innerHTML="Test";

document.getElementsByClassName("pi pi-chevron-right")[0]
<span class="pi pi-chevron-right">Test</span>
document.getElementsByClassName("pi pi-chevron-right")[0].innerHTML="Test";

document.getElementsByClassName("pi pi-chevron-right")[0]


document.getElementsByClassName("pi pi-chevron-right")[0].click()
undefined
ERROR TypeError: Unable to get property '0' of undefined or null reference
   "ERROR"
   {
      [functions]: ,
      __proto__: { },
      description: "Unable to get property '0' of undefined or null reference",
      message: "Unable to get property '0' of undefined or null reference",
      name: "TypeError",
      number: -2146823281,
      stack: "TypeError: Unable to get property '0' of undefined or null reference
   at e.prototype.onClick (https://ghc.connect.pwc.com/main.058cd423c1cf54028b93.js:1:5086814)
   at Anonymous function (https://ghc.connect.pwc.com/main.058cd423c1cf54028b93.js:1:5106159)
   at handleEvent (https://ghc.connect.pwc.com/main.058cd423c1cf54028b93.js:1:1197790)
   at handleEvent (https://ghc.connect.pwc.com/main.058cd423c1cf54028b93.js:1:1208980)
   at Uf (https://ghc.connect.pwc.com/main.058cd423c1cf54028b93.js:1:1167505)
   at Anonymous function (https://ghc.connect.pwc.com/main.058cd423c1cf54028b93.js:1:1173798)
   at Anonymous function (https://ghc.connect.pwc.com/main.058cd423c1cf54028b93.js:1:2655047)
   at e.prototype.invokeTask (https://ghc.connect.pwc.com/main.058cd423c1cf54028b93.js:1:68805)
   at onInvokeTask (https://ghc.connect.pwc.com/main.058cd423c1cf54028b93.js:1:1131800)
   at e.prototype.invokeTask (https://ghc.connect.pwc.com/main.058cd423c1cf54028b93.js:1:68805)",
      Symbol()_i.t1si0nbd5nz: undefined,
      Symbol()_j.t1si0nbd5nz: undefined,
      Symbol()_l.t1si0nbd5nz: undefined,
      Symbol(INITIAL_VALUE)_h.t1si0nbd5nz: undefined,
      Symbol(observable)_n.t1si0nbd5nz: undefined,
      Symbol(react.element)_m.t1si0nbd5nz: undefined,
      Symbol(rxSubscriber)_g.t1si0nbd5nz: undefined,
      Symbol(rxSubscriber)_o.t1si0nbd5nz: undefined,
      Symbol(test)_k.t1si0nbd5nz: undefined
   }
javascript internet-explorer datepicker ui-automation code-injection
1个回答
0
投票

找到尝试检查的元素，然后调用单击触发器

function handler() {
    const elements = document.getElementsByClassName("pi pi-chevron-right");
    if (elements && elements[0]) {
        elements[0].click();
    } else {
        console.error('Element not found!')
    }
}

在调用handler文件之前，请务必小心加载。否则，可能会发生，因为您要使用datepicker动态类，建议您为datepicker找到api函数。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.