How do I select span with onclick property?

Question

I'm trying to make a small script for filtering threads and users in a forum, I've got the code for thread filtering working. Adapting it to the users filtering should be as easy as changing the selector, but any selector I try except a (with any target attribute) it just don't work, before using advanced selectors I have directly tried to grab elements by span and also didn't work, so the problem is not the selector.

I reproduced the threads list here:

https://codepen.io/anon/pen/awqyoj

//For threads
//document.querySelectorAll('a[href*="showthread.php"]')

//For users
//document.querySelectorAll('span[onclick*="member.php?u="]')


//The filters
var Filters = ["useless","testing","Dude","User"];

//The code
var FilterThis = document.querySelectorAll('a');

for (var i = 0; i < FilterThis.length; i++) {
  checkToBlock(FilterThis[i], "text");
}

function checkToBlock(obj, namePropText) {
  var text = obj[namePropText];

  for (var i = 0; i < Filters.length; i++) {
    if (text.toLowerCase().indexOf(Filters[i].toLowerCase()) !== -1) {
      obj.closest("tr").style.opacity = ".1";
    }
  }
}
//style.display = "none"

body {
  margin: 32px;
}
a:link {
  color: #cc3300;
  text-decoration: none;
}
a:visited {
  color: #cc3300;
  text-decoration: none;
}
a:hover, a:active {
  color: #330099;
  text-decoration: underline;
}

td {
  font: 10pt verdana;
}
.tborder {
  background: #D1D1D1;
  color: #000000;
  border: 0px solid #a1a1a1;
}
.alt1 {
  background: #F1F1F1;
  color: #000000;
}

.smallfont {
  font: 11px verdana;
}


  
    
      
        
          Random thread
        
        
          User
        
      
    
    
      
        
          Just a thread
        
        
          User
        
      
    
    
      
        
          Another thread
        
        
          Dude
        
      
    
    
      
        
          Useless thread
        
        
          Dude
        
      
    
    
      
        
          Intresting thread
        
        
          That guy

Pineda · Accepted Answer

Your issue lies here:

  checkToBlock(FilterThis[i], "text");

The above works for tags because of a discrepancy that exists where the property text exists on tag elements whereas textContent is applicable to all elemens with text including tags. This irregularity is described in the SO question: Difference between text and textContent properties.

To obtain the text content of an element, the property is textContent. Amend your code as follows:

  checkToBlock(FilterThis[i], "textContent");

Here's an amended snippet too:

//For threads
//document.querySelectorAll('a[href*="showthread.php"]')

//For users
//document.querySelectorAll('span[onclick*="member.php?u="]')


//The filters
var Filters = ["useless","testing","Dude","User"];

//The code
var FilterThis = document.querySelectorAll('span[onclick*="member.php?u="]')

for (var i = 0; i < FilterThis.length; i++) {
  checkToBlock(FilterThis[i], "textContent");
}

function checkToBlock(obj, namePropText) {
  var text = obj[namePropText];

  for (var i = 0; i < Filters.length; i++) {
    if (text.toLowerCase().indexOf(Filters[i].toLowerCase()) !== -1) {
      obj.closest("tr").style.opacity = ".1";
    }
  }
}
//style.display = "none"

body {
  margin: 32px;
}
a:link {
  color: #cc3300;
  text-decoration: none;
}
a:visited {
  color: #cc3300;
  text-decoration: none;
}
a:hover, a:active {
  color: #330099;
  text-decoration: underline;
}

td {
  font: 10pt verdana;
}
.tborder {
  background: #D1D1D1;
  color: #000000;
  border: 0px solid #a1a1a1;
}
.alt1 {
  background: #F1F1F1;
  color: #000000;
}

.smallfont {
  font: 11px verdana;
}


  
    
      
        
          Random thread
        
        
          User
        
      
    
    
      
        
          Just a thread
        
        
          User
        
      
    
    
      
        
          Another thread
        
        
          Dude
        
      
    
    
      
        
          Useless thread
        
        
          Dude
        
      
    
    
      
        
          Intresting thread
        
        
          That guy

How do I select span with onclick property?

Answers (1)

Related Questions