Getting handle on the calling html element using javascript or dojo or jquery

Question

I have the following table:

<table>
    <tr><td><span onClick='toggleFunction();'>ABC</span></td></tr>
    <tr><td><span onClick='toggleFunction();'>PQR</span></td></tr>
    <tr><td><span onClick='toggleFunction();'>XYZ</span></td></tr>
    <tr><td><span onClick='toggleFunction();'>LMN</span></td></tr>
</table>

The HTML is dynamically generated.

function toggleFunction() {
  var innerHtml = //code to get inner html of calling element here
  console.log(innerHtml);
}

I want to get the inner html of span from which toggleFunction() is invoked through onClick.

For e.g. when the click is on row 1, ABC should get printed on console. But when the click is on row 3, XYZ should be printed.

Is this possible through Javascript or Dojo? I can not use Jquery. However, I would like to know if this is possible using Jquery or not.

Please note that the span element is without any id.

This is not a duplicate of other question as:

1) The accepted solution uses inline javascript just to alert innerHTML. However, for me, I just want a way to gain a Handle, so that I can do far more required processing inside my function.

2) Other answers on the question are using element id, which is not my case.

Possible duplicate of [How to get innerHTML of this element in javascript?](https://stackoverflow.com/questions/7674194/how-to-get-innerhtml-of-this-element-in-javascript) and [Javascript: How to get innerHTML of clicked button](https://stackoverflow.com/questions/25004823/javascript-how-to-get-innerhtml-of-clicked-button) — adiga, Dec 04 '18 at 08:29
@adiga This is not a duplicate question. Better read the question first guys. Do not over monitor and discourage questions. — Vicky, Dec 04 '18 at 08:33
use `toggleFunction` instead of `alert`. I found at least 10 duplicates. — adiga, Dec 04 '18 at 08:35
The answer is simply `var innerHtml = event.target.innerHTML;` — Zakaria Acharki, Dec 04 '18 at 08:37
@adiga: Really? Where are the question which answers my question. If `toggleFunction` is in a separate file, console.log(this.innerHTML) inside toggleFunction does not work. If it does, why not provide a JSFiddle of the same if you feel you know the answer. — Vicky, Dec 04 '18 at 08:38
@ZakariaAcharki: Great. If this works then that is what I was looking for. And none of the other questions have that line as an answer. — Vicky, Dec 04 '18 at 08:39
Separate file, same file won't make difference. `console.log(this.innerHTML)` won't work because this refers to the `Window` object and not to your element. — adiga, Dec 04 '18 at 08:45
More duplicates: [jQuery: get content / innerhtml onclick](https://stackoverflow.com/questions/8685094) and [How to get the innerHTML of selectable jquery element?](https://stackoverflow.com/questions/18786050) and [getting inner html of a link when clicked](https://stackoverflow.com/questions/24995501) and [Use jQuery to get text of target](https://stackoverflow.com/questions/14720807) — adiga, Dec 04 '18 at 08:45
@adiga: You really don't get the question. Do you? I have clearly mentioned, there is no id present. All you are redirecting me to are the answers using id or css class name or something like that. Even I can search those. Please let it be. I have got what I was looking for. No need to prove anything. — Vicky, Dec 04 '18 at 08:50
[Man, just replace `alert` with your function in the first duplicate](https://jsfiddle.net/rbg8s79k/). Good day. — adiga, Dec 04 '18 at 08:56
Your answer is right in the proposed duplicate: https://stackoverflow.com/a/25005107/2181514 - add `this`, ie: `` `function toggleFunction(el) {` — freedomn-m, Dec 04 '18 at 09:01
Possible duplicate of [Javascript: How to get innerHTML of clicked button](https://stackoverflow.com/questions/25004823/javascript-how-to-get-innerhtml-of-clicked-button) — freedomn-m, Dec 04 '18 at 09:01

score 0 · Accepted Answer · answered Dec 04 '18 at 08:41

You could use event.target to target the clicked element then get the content using textContent like :

var innerHtml = event.target.textContent;

NOTE 1: The td should be closed before tr so use </td></tr> at the end instead of </tr></td>.

NOTE 2: You have a typo in the variable passed to console.log(), It should be innerHtml instead of innnerHtml.

NOTE 3: Since you've no HTML inside the columns it will be better to use textContent instead of innerHTML.

function toggleFunction() {
  var innerHtml = event.target.textContent;
  console.log(innerHtml);
}

<table>
  <tr>
    <td><span onClick='toggleFunction();'>ABC</span></td>
  </tr>
  <tr>
    <td><span onClick='toggleFunction();'>PQR</span></td>
  </tr>
  <tr>
    <td><span onClick='toggleFunction();'>XYZ</span></td>
  </tr>
  <tr>
    <td><span onClick='toggleFunction();'>LMN</span></td>
  </tr>
</table>

Getting handle on the calling html element using javascript or dojo or jquery

1 Answers1