选择复选框列表然后单击 li 按钮完成弹出窗口的 Javascript 函数答案

【问题标题】：Javascript Function That Selects Check Box List and then clicks li Button to complete popup window选择复选框列表然后单击 li 按钮完成弹出窗口的 Javascript 函数
【发布时间】：2021-05-11 18:38:36
【问题描述】：

我需要递归 JavaScript 函数，它选择一个复选框列表，然后单击一个按钮，最后单击另一个按钮来完成一个操作。

查看截图

检查类名是(checkboxes)，li按钮是(liBtn)，模态完成按钮是(btn-success)

简单来说我创建了这个函数

function automation() {
    let chBox = document.querySelectorAll(".checkboxes");
    for (var i = 0; i < chBox.length; i++) {
        let chBox = document.querySelectorAll('.checkboxes');
        chBox.forEach (btn => btn.click());
        let btnElem = document.querySelector('li#Li3');
        btnElem.click();
       }
}

但返回此错误

VM162:7 Uncaught TypeError: Cannot read property 'click' of null
    at automation (<anonymous>:7:21)
    at <anonymous>:1:1

提前致谢

【问题讨论】：

除了 javascript，还要添加您的 html 代码。

标签： javascript function recursion

【解决方案1】：

我需要更多关于这个问题的信息才能更有帮助。

我可能会误解，但我认为您不需要递归地单击列表项。

这是因为由于 document.querySelectorAll('.checkboxes') 选择了该类的所有复选框，因此它会单击所有这些复选框（参见下面的第一个 sn-p）。

按钮错误可能来自 querySelector 没有找到目标，这意味着您可能在尝试选择该元素时使用了错误的 CSS 属性（请参阅下面的第二个 sn-p）。

function automation() {
      let chBox = document.querySelectorAll('.checkboxes');
      chBox.forEach (btn => btn.click());
      let btnElem = document.querySelector('li#Li3');
      btnElem.click();
};

automation();


// demostrates click works
let btnElem = document.querySelector('li#Li3');
btnElem.addEventListener('click', () => alert('button clicked'));

<div class='container'>
  <input class='checkboxes' type='checkbox' />
  <input class='checkboxes' type='checkbox' />
  <input class='checkboxes' type='checkbox' />
</div>
<hr />
<div class='container'>
  <input class='checkboxes' type='checkbox' />
  <input class='checkboxes' type='checkbox' />
  <input class='checkboxes' type='checkbox' />
</div>
<hr />
<li id='Li3'>button</li>

   function clickNoElement() {
       let btnElem = document.querySelector('li#WrongId');
       btnElem.click();
    }

clickNoElement();

 &lt;li type='button' id='ActuallyId'&gt;Button&lt;/li&gt;

【讨论】：