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

Answer 1

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>

Answer 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.