javascripthtmlarraysfilteringtampermonkey

Click on DOM element that matches array object


Edit: Thanks to Giri , the working code looks like this. The intervalHandle makes sure the if statement only runs once a random lapse of time has passed.

$(document).ready(function searchAndGet() {
    const elements = document.querySelectorAll('.class-name');
    const toMatch = ["Example1", "Example2", "Example3"];
    var matchedElement = Array.from(elements).filter(element => toMatch.includes(element.dataset.name)).at(0);
    console.log(matchedElement);

    const getRandomNumber = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
    var interval = getRandomNumber(0.7, 1.9); // timeout in seconds


    var intervalHandle = setInterval(function () {
    if (matchedElement) {
        matchedElement.click();
    }
    }, interval * 1000);

});

Original post:

I hope the title is clear, english is not my first language.

I'm trying to make a userscript that will go through every element with .class-name, and look for matches in the data-name field, then click (with .click()) on the first element that matches one of the objects in the toMatch array. The script will only be used by me, so I'm not concerned about compatibility across browsers; I'm using Firefox. I've seen other answers that talk about matching elements in different arrays (like this one for example) but I'm not sure how to implement such answers in this code, or how I'd interact with a specific element that matches one of the objects in the array.

The elements of the DOM in question:

<div class="class-name" data-name="Example0"></div>
<div class="class-name" data-name="Example1"></div>

My code thus far:

const toMatch = ["Example1", "Example2", "Example3"];

items.each(function (i) {
const itemData = $(this).find('.class-name');
const itemEl = itemData[0];
const item = itemEl.dataset.name;
});

// Small delay in seconds before the function gets executed once the page is loaded
const getRandomNumber = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
var interval = getRandomNumber(1, 2); // timeout in seconds

var intervalHandle = setInterval(function () {
// Code will go here
}, interval * 1000);

This is as far as I've gotten, I'm a js beginner so I'm not sure how to pull this off. Could I get some advice, please?


Solution

  • Below are the steps to get the matched Element:

    1. Selecting Elements:

       const elements = document.querySelectorAll('.class-name') //returns a node list
      
    2. Convert the NodeList to an array to perform array operations:

       const elementsArray = Array.from(elements);
      

      or

       const elementsArray = [...elements];
      
    3. Filter the elements which includes any of the toMatch names as the data-name attribute:

       const filteredElements = elementsArray.filter(element=> toMatch.includes(element.dataset.name));
      
    4. To get the first item from the list:

       const firstMatchedElement = filteredElements.at(0);
      

    Now putting altogether as below:

        const elements = document.querySelectorAll('.class-name');
        const matchedElement = Array.from(elements).filter(element => toMatch.includes(element.dataset.name)).at(0);