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;
}

<table class="tborder" id="threadslist" width="100%" cellspacing="1" cellpadding="5" border="0" align="center">
  <tbody id="threadbits_forum_12">
    <tr>
      <td class="alt1" id="td_threadtitle_0001" title="">
        <div>
          <a href="showthread.php?t=0001" id="thread_title_0001">Random thread</a>
        </div>
        <div class="smallfont">
          <span style="cursor:pointer" onclick="window.open('member.php?u=100', '_self')">User</span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="alt1" id="td_threadtitle_0002" title="">
        <div>
          <a href="showthread.php?t=0002" id="thread_title_0002">Just a thread</a>
        </div>
        <div class="smallfont">
          <span style="cursor:pointer" onclick="window.open('member.php?u=100', '_self')">User</span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="alt1" id="td_threadtitle_0003" title="">
        <div>
          <a href="showthread.php?t=0003" id="thread_title_0003">Another thread</a>
        </div>
        <div class="smallfont">
          <span style="cursor:pointer" onclick="window.open('member.php?u=200', '_self')">Dude</span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="alt1" id="td_threadtitle_0004" title="">
        <div>
          <a href="showthread.php?t=0004" id="thread_title_0004">Useless thread</a>
        </div>
        <div class="smallfont">
          <span style="cursor:pointer" onclick="window.open('member.php?u=200', '_self')">Dude</span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="alt1" id="td_threadtitle_0005" title="">
        <div>
          <a href="showthread.php?t=0005" id="thread_title_0005">Intresting thread</a>
        </div>
        <div class="smallfont">
          <span style="cursor:pointer" onclick="window.open('member.php?u=300', '_self')">That guy</span>
        </div>
      </td>
    </tr>
  </tbody>
</table>

so you are looking at anchors and the text you are looking for is in spans? So why are you selecting anchors? And text? you mean textContent? — epascarello, Jun 29 '17 at 23:51
You're right about it not mattering. However you call to `.querySelectorAll` is working. The problem is elsewhere in your code. You can check this by logging out the result of FilterList after the call. You should receive 5 elements — Pineda, Jun 29 '17 at 23:57
I'm selecting anchors to prove the code is working fine, it filters any text I want inside the anchors, but when I change selector from anchors to divs or spans it stops working. — andrei030, Jun 30 '17 at 00:01

Pineda · Accepted Answer · 2017-06-30T00:20:36.333

Your issue lies here:

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

The above works for <a> tags because of a discrepancy that exists where the property text exists on <a> tag elements whereas textContent is applicable to all elemens with text including <a> 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;
}

<table class="tborder" id="threadslist" width="100%" cellspacing="1" cellpadding="5" border="0" align="center">
  <tbody id="threadbits_forum_12">
    <tr>
      <td class="alt1" id="td_threadtitle_0001" title="">
        <div>
          <a href="showthread.php?t=0001" id="thread_title_0001">Random thread</a>
        </div>
        <div class="smallfont">
          <span style="cursor:pointer" onclick="window.open('member.php?u=100', '_self')">User</span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="alt1" id="td_threadtitle_0002" title="">
        <div>
          <a href="showthread.php?t=0002" id="thread_title_0002">Just a thread</a>
        </div>
        <div class="smallfont">
          <span style="cursor:pointer" onclick="window.open('member.php?u=100', '_self')">User</span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="alt1" id="td_threadtitle_0003" title="">
        <div>
          <a href="showthread.php?t=0003" id="thread_title_0003">Another thread</a>
        </div>
        <div class="smallfont">
          <span style="cursor:pointer" onclick="window.open('member.php?u=200', '_self')">Dude</span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="alt1" id="td_threadtitle_0004" title="">
        <div>
          <a href="showthread.php?t=0004" id="thread_title_0004">Useless thread</a>
        </div>
        <div class="smallfont">
          <span style="cursor:pointer" onclick="window.open('member.php?u=200', '_self')">Dude</span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="alt1" id="td_threadtitle_0005" title="">
        <div>
          <a href="showthread.php?t=0005" id="thread_title_0005">Intresting thread</a>
        </div>
        <div class="smallfont">
          <span style="cursor:pointer" onclick="window.open('member.php?u=300', '_self')">That guy</span>
        </div>
      </td>
    </tr>
  </tbody>
</table>

Thanks for your answer, but it doesn't work, check in the codepen I attached, I've tried `span`, `div` and none work, only `a` and I don't get it. Anyway in the selector I'm trying to use uses wildcard so it should work. — andrei030, Jun 29 '17 at 23:52
I see, that was my mistake, thanks a lot for the help. But I still don't get why my code was working perfectly with anchors. :/ — andrei030, Jun 30 '17 at 00:08
There's an answer for exactly that here on SO: https://stackoverflow.com/q/13172305/2902660 — Pineda, Jun 30 '17 at 00:11
If you've found my answer helpful, please consider marking my answer as the chosen one (I know you don't have enough rep to up-vote yet, but that'd be cool too :) ) — Pineda, Jun 30 '17 at 00:12
Thanks again! :) PS: yup, I've just did, I'm new with all this, I was looking for the way to do it. xD — andrei030, Jun 30 '17 at 00:15

How do I select span with onclick property?

1 Answers1