javascriptjqueryqtip

Trying to identify a specific element for a website extension


Edit: This is very dumb of me but I just realized that this whole problem is stemming from qtip. It seems that it is only generating the necessary code once the user hovers over the necessary area. No idea why I didn't even think to look over that. If anyone is familiar with qtip and knows a good way to identify the element the moment it's actually generated I would appreciate the help. Sorry for those who have already given good advice

Edit 2: I figured it out, thank's for the help those that did. This is the code I used to look for the event that triggered qtip to create the element I needed to identify and then have it search for it.

document.addEventListener('mouseover', function(event) {
  var target = event.target;
  if (target.classList.contains('pre-qtip-content')) {
    var elements = target.querySelectorAll("a.wl-item.dropdown-item.added");
    var result = false;
    elements.forEach(function(element) {
      if (element.innerText.search("Completed") >= 0) {
        console.log("Successfully Identified");
        result = true;
      }
    });
    return result;
  }
});

Not sure if this is entirely correct but it currently functions so I'm gonna run with it


I'm currently trying to write an extension for chrome for a website to have some QoL upgrades, however I'm basically brand new when it comes to coding and having a lot of trouble trying to identify a specific element on the site. There's more that needs to be done after that but at this point I'm just trying to make sure I can actually grab it and print something to console to verify it's been pulled.

So this is my current code:

function replaceCheck() {
    const elements = document.querySelectorAll(".wl-item.dropdown-item.added > a");
  
    elements.forEach((element) => {
      if (element.textContent.includes("Completed")) {
        console.log("Successfully Identified");
      }
    });
  }

With this I'm trying to grab the following element from a site: Image of website element

The problem is is that nothing is printing to console when I run it, I need the code to include the "Completed" string as there are other possible strings depending on the option a user selects from a drop down.

Now for some additional clarification, I learned javascript self taught like 6 years ago now and never actually used it for anything really, so I basically have no idea what I'm doing at this point. This code was originally written up with the help of AI to get a starting point and tweaked it from there so this code could be completely incorrect in every way just trying to get an idea at this point.


Solution

  • Consider the following.

    function replaceCheck() {
      var elements = document.querySelectorAll("a.wl-item.dropdown-item.added");
      var result = false;
      elements.forEach((element) => {
        if (element.innerText.search("Completed") >= 0) {
          console.log("Successfully Identified");
          result = true;
        }
      });
      return result;
    }
    

    Using textContent might be more aggressive then you need. I used innerText property.

    The textContent property sets or returns the text content of the specified node, and all its descendants.

    Versus:

    The innerText property sets or returns the text content of an element.

    It's not clear, as you didn't provide a complete example, how you are using or calling the function, so I am assuming it may be used in a logical statement.

    Search will returns the index (position) of the first match or -1 if not found. This example is case sensitive, so it must match "Completed" exacly.