JavaScript 点击按钮

Question

我在网页上有一个带有以下检查的按钮：

<button type="button" class="odd-item-dropdown-confirm" data-qa="button-odd-item-dropdown-confirm">确认</button>

我想要点击这个按钮，我尝试了：

function clickConfirm(){
  var bntConfirm = document.querySelector('.btn.button-odd-item-dropdown-confirm');
  bntConfirm.click();
}

clickConfirm();

并获得了 Uncaught TypeError: Cannot read property 'click' of null

。

- TwoStarII

---

无法读取空值的属性“click”，这意味着它无法匹配元素，您需要使用HTML元素的名称，例如button.className。此外，在选择querySelector时您犯了一个错误。 - Pooya Panahandeh

如果你看一下我的检查，类确实存在，我尝试过使用' class '和'data-qa'，但都不行，但是在开发者模式下检查元素，你可以看到它确实存在，请看我问题中的第一段代码。 - TwoStarII

正如多次（在多个答案中）所述，该类不存在。 - freefaller

在你的例子中，按钮没有名为btn和button-odd-item-dropdown-confirm的类，因此document.querySelector('.btn.button-odd-item-dropdown-confirm')无法找到你期望的目标按钮元素。只有odd-item-dropdown-confirm，而querySelector不会跟踪像你所写的data-qa属性内部的任何内容。 - Vectrobyte

好的，我现在明白了，感谢您的帮助。 - TwoStarII

Answer 1

它说了它的意思：查询不匹配任何元素并返回null。如果您查看HTML，没有class为button-odd-item-dropdown-confirm。 您应该使用此选择器进行选择：button.odd-item-dropdown-confirm。请参见概念证明：

// Checking
document.querySelector('button').addEventListener('click', () => {
  console.log('I am clicked');
});

clickConfirm();
function clickConfirm(){

    var bntConfirm = document.querySelector('button.odd-item-dropdown-confirm');
    bntConfirm.click();
}

<button type="button" class="odd-item-dropdown-confirm" data-qa="button-odd-item-dropdown-confirm">Confirm</button>

- Terry

Answer 2

clickConfirm();
function clickConfirm(){

    var bntConfirm = document.querySelector('.odd-item-dropdown-confirm');
    bntConfirm.click();
}

如果您在其他地方没有使用过这个类，我认为这应该可以工作，但您始终可以使用ID或其他内容来正确标识按钮。

- Iria

Answer 3

这是您的代码中的一个问题： var bntConfirm = document.querySelector('.btn.button-odd-item-dropdown-confirm'); 您没有任何地方使用 .btn 类。

您没有任何地方使用 .button-odd-item-dropdown-confirm 类。

请查看可以解决问题的解决方案。

clickConfirm();
function clickConfirm(){
    // this will not work.
    // var bntConfirm = document.querySelector('.btn.button-odd-item-dropdown-confirm');
    // you don't have .btn class anywhere
    // you don't have .button-odd-item-dropdown-confirm class anywhere
    /* --------------------- */
    
    // select by class
    var bntConfirm = document.querySelector('.odd-item-dropdown-confirm');
    bntConfirm.click();
    
    // or select by data attr
    var bntConfirm = document.querySelector('*[data-qa="button-odd-item-dropdown-confirm"]');
    bntConfirm.click();
}

<button type="button" class="odd-item-dropdown-confirm" data-qa="button-odd-item-dropdown-confirm">Confirm</button>

- qiAlex

Answer 4

您选择的课程不正确。

    clickConfirm();
    function clickConfirm(){

        var bntConfirm = document.querySelector('.odd-item-dropdown-confirm');
        bntConfirm.click();
    }

- Darshana Pathum