How retrieve innerHTML of an anchor tag using jQuery?

Question

I have a Bootstrap table like this,

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  <table class="table table-striped table-bordered">
    <tr><th>First Name</th><th>Last Name</th><th>Age</th></tr>
    <tr><td><a class="cl" href="" onclick="call()">Mickey</a></td><td>Mouse</td><td>5</td>
    <tr><td><a class="cl" href="" onclick="call()">Tom</a></td><td>Cat</td><td>6</td>
    <tr><td><a class="cl" href="" onclick="call()">Pooh</a></td><td>Bear</td><td>4</td>
    <tr><td><a class="cl" href="" onclick="call()">Donald</a></td><td>Duck</td><td>7</td>
    <tr><td><a class="cl" href="" onclick="call()">Jerry</a></td><td>Mouse</td><td>8</td>
  </table


  <br /><br />  
    <div id="output"></div>



  <script>
    $('.cl').click(function() {

      var t = $(this).text();

      $('#output').html(t);

    });
  </script>

</body>
</html>

The firstname column consists of hyperlinks. When a user clicks on any of firstnames, the value should be returned to an output <div> without any page redirection.

I get this error in the console,

"ReferenceError: call is not defined
    at HTMLAnchorElement.onclick (http://null.jsbin.com/runner:1:993)"

What am I doing wrong here?

Here's a link to what I've done till now - http://jsbin.com/loqikixesa/edit?html,console,output

You have both an inline reference (`onclick="call()"`) and a bound event handler (`$('.cl').click(...`). Pick one and go with it. — Heretic Monkey, Apr 11 '16 at 17:35

score 1 · Answer 1 · answered Apr 11 '16 at 17:33

1

I believe you want this (use text not val):

 var t = $(this).text();

answered Apr 11 '16 at 17:33

Steve Wellens

20,506
2
28
69

score 1 · Accepted Answer · answered Apr 11 '16 at 17:35

1

Just prevent the default action of anchor tag and use .text() instead of .val(),

$('.cl').click(function(e) {
  e.preventDefault();
  $('#output').html($(this).text());
});

DEMO

Also remove the inline handler for those elements. That will create a conflict.

answered Apr 11 '16 at 17:35

Rajaprabhu Aravindasamy

66,513
17
101
130

score 0 · Answer 3 · edited May 23 '17 at 11:45

0

you only make this

$('.cl').click(function() {
  var t = $(this).text();
  $('#output').append(t);
});

and if you now when you can use val or text check this Difference between val() and text()

edited May 23 '17 at 11:45

Community

1
1

answered Apr 11 '16 at 17:37

Ezequiel García

2,616
19
12

How retrieve innerHTML of an anchor tag using jQuery?

3 Answers3

DEMO