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? and Javascript: How to get innerHTML of clicked button — adiga
– adiga, Commented Dec 4, 2018 at 8:29
@adiga This is not a duplicate question. Better read the question first guys. Do not over monitor and discourage questions. — Vicky
– Vicky, Commented Dec 4, 2018 at 8:33
use toggleFunction instead of alert. I found at least 10 duplicates. — adiga
– adiga, Commented Dec 4, 2018 at 8:35
The answer is simply var innerHtml = event.target.innerHTML; — Zakaria Acharki
– Zakaria Acharki, Commented Dec 4, 2018 at 8: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
– Vicky, Commented Dec 4, 2018 at 8:38

Zakaria Acharki · Accepted Answer · 2018-12-04 08:41:16Z

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>

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related