Question 363899 in Html Question posted in
Some basic documentation can be found here.

Html – Click Button From Specific id

I was hoping someone could help me with some javascript that would click on this button:

<div tabindex="0" role="button" id="id_72229384732282" class="collapsed focus-visible" data-tutorial-selector-id="filterButton" aria-label="Filter rows">

I can’t use the id_7222…. because this is dynamic and changes after a page refresh. Is there a way to click this button based on the id="filterButton"?

Thanks!

I’ve tried all sorts of methods but I know my syntax or the class reference is wrong. Here are the general ones I’ve tried:

document.getElementsByClassName('filterButton').click();

document.getElementById("filterButton");
Tags:

2

Answers


  1. 0

    Notice the s in getElementsByClassName? That means it is plural and returns a collection. You would need to index your way to the button, so it would be document.getElementsByClassName('focus-visible')[0].click() – because you cannot use getElementsByClassName to get at a data attribute

    Instead you can use

    document.querySelector['[data-tutorial-selector-id="filterButton"]').click()

    which will click the FIRST element with that attribute and value

    If you have more than one element with the attribute data-tutorial-selector-id="filterButton", then you need to be more specific.

    document.querySelector['div[data-tutorial-selector-id="filterButton"]').click()

    will click the first DIV with that attribute and

    document.querySelectorAll['div[data-tutorial-selector-id="filterButton"]')[1].click()

    will click the SECOND div with that attribute (the collection returned by querySelectorAll is 0 based)

    Login or Signup to reply.
  2. 0

    If the id is dynamic and you can’t use it, you can use class to select the element.
    Your html element has collapsed focus-visible class.
    If you don’t want to use it, and rather use filterButton, you should edit your html and add filterButton to classes.
    (currently on your html, ‘filterButton’ is not defined among classes. )

    <div tabindex="0" role="button" id="id_72229384732282" class="collapsed focus-visible filterButton" data-tutorial-selector-id="filterButton" aria-label="Filter rows">

    then you can select it on JavaScript

    document.getElementsByClassName('filterButton').click();
// or 
document.querySelector('div.filterButton').click();

    IF you can’t touch/ edit your html, then you should select your element like this, (as @mplungjan also points out‘)

    
// if there are more than one element with the same dataset key-value pair, 
// this selection selects the 1st of those elements
document.querySelector('div[data-tutorial-selector-id="filterButton"]').click();

    SideNote:

    data-tutorial-selector-id="filterButton" is a ‘data’ attribute.
    more info.

    It is used to store data on html and can be retrieved in JavaScript side using keyword dataset

    
let theButton = document.querySelector('div.filterButton')

// Note hyphen changed to camelCase
theButton.dataset.tutorialSelectorId'] // 'filterButton'

    On CSS side, you can use this data attribute as a selector

    
div[data-tutorial-selector-id="filterButton"]{

background:red;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search