Javascript Click Button

Question

I have a button on a webpage with the following inspection:

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

I would like to click on this button, I tried:

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

clickConfirm();

And got Uncaught TypeError: Cannot read property 'click' of null

Cannot read property 'click' of null, it means it can't match the element, you need to use the name of the html element, for example button.className. also you made mstake at selecting querySelector. — Pooya Panahandeh
– Pooya Panahandeh, Commented Jan 14, 2020 at 10:12
If you look at my inspection, the class does exist, I tried with both 'class' and 'data-qa',none work but inspecting the element in developer mode you can see that it does exist, look at the first code in my question — TwoStarII
– TwoStarII, Commented Jan 14, 2020 at 10:12
As has been stated many times (in multiple answers), no the class does NOT exist — freefaller
– freefaller, Commented Jan 14, 2020 at 10:14
In your example too, the button doesn't have classes named btn and button-odd-item-dropdown-confirm and so document.querySelector('.btn.button-odd-item-dropdown-confirm') is not finding the targetted button element that you are expecting. There is odd-item-dropdown-confirm only, and querySelector doesn't track whatever there is inside data-qa attribute like you've written. — Vectrobyte
– Vectrobyte, Commented Jan 14, 2020 at 10:18

Terry · Accepted Answer · 2020-01-14 10:11:18Z

7

It says what it means: the query is not matching any element and returning null. If you look at your HTML, there is no class button-odd-item-dropdown-confirm.

You should be selecting using this selector: button.odd-item-dropdown-confirm. See proof-of-concept:

// 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>

answered Jan 14, 2020 at 10:11

Terry

66.7k16 gold badges107 silver badges127 bronze badges

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

Comments

Iria · Accepted Answer · 2020-01-14 10:12:45Z

2

clickConfirm();
function clickConfirm(){

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

I think this should work if you haven't used this class anywhere else, but you can always use Ids, or other things to identify the button properly.

answered Jan 14, 2020 at 10:12

Iria

4971 gold badge9 silver badges21 bronze badges

Comments

qiAlex · Accepted Answer · 2020-01-14 10:13:50Z

this is a problem in your code: 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

Take a look at the solutions that can work

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>

Darshana Pathum · Accepted Answer · 2020-01-15 11:07:05Z

1

Your selected class is not the correct one.

    clickConfirm();
    function clickConfirm(){

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

edited Jan 15, 2020 at 11:07

answered Jan 14, 2020 at 10:13

Darshana Pathum

6695 silver badges12 bronze badges

Collectives™ on Stack Overflow

Javascript Click Button

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related