ReferenceError: SearchedProduct is not defined

Question

JsFiddle: https://jsfiddle.net/ssmp6fx4/

Html

<table style="width:100%;">
    <tbody>
        <tr style="background-color: #d3d3d3;">
            <td>PRODUCTS</td>
            <td></td>
        </tr>
        <tr class="search-reslut-pro" style="cursor: pointer;" 
              onclick="SearchedProduct(this);" data-employeeid="22" data-id="1" 
              data-name="kaffe" data-price="1">
            <td>
                <div>kaffe</div>
                <div>1</div>
            </td>
            <td>1</td>
        </tr>
    </tbody>
</table>

Js

function SearchedProduct(id) {
    debugger;
    var id = $(id).attr('data-id');
    var name = $(id).attr('data-name');
    var price = $(id).attr('data-price');
    var EmployeeID = $(id).attr('data-EmployeeID');
}

Issue: Clicking on kaffe says: ReferenceError: SearchedProduct is not defined

Am I missing anything?

Put you `javascript` code in `` tag. Might be it can resolve your issue. @Pankaj — Shubham Baranwal, May 20 '17 at 10:23
Include jQuery plugin to make it run in your fiddle. @Tushar — Shubham Baranwal, May 20 '17 at 10:32

score 1 · Accepted Answer · answered May 20 '17 at 10:38

The issue is you're overriding the value of id variable which is passed to the function as an argument.

function SearchedProduct(id) {
                         ^^
    var id = $(id).attr('data-id');
        ^^

For the subsequent statements, id is a string. So, $(id) will not select any matching element.

function SearchedProduct(el) {
  var id = $(el).attr('data-id');
  var name = $(el).attr('data-name');
  var price = $(el).attr('data-price');
  var EmployeeID = $(el).attr('data-EmployeeID');

  console.log(id, name, price, EmployeeID);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%;">
  <tbody>
    <tr style="background-color: #d3d3d3;">
      <td>PRODUCTS</td>
      <td></td>
    </tr>
    <tr class="search-reslut-pro" style="cursor: pointer;" onclick="SearchedProduct(this);" data-employeeid="22" data-id="1" data-name="kaffe" data-price="1">
      <td>
        <div>kaffe</div>
        <div>1</div>
      </td>
      <td>1</td>
    </tr>
  </tbody>
</table>

I suggest you to use jQuery to bind events on elements and use data() to access data-* attribute value.

$('.search-reslut-pro').click(function(e) {
    var id = $(this).data('id');
    var name = $(this).data('name');
    ...
});

score 0 · Answer 2 · answered May 20 '17 at 10:07

Try this updated fiddle: https://jsfiddle.net/ssmp6fx4/1/

<table style="width:100%;">
    <tbody>
        <tr style="background-color: #d3d3d3;">
            <td>PRODUCTS</td>
            <td></td>
        </tr>
        <tr class="search-reslut-pro" style="cursor: pointer;" data-employeeid="22" data-id="1" data-name="kaffe" data-price="1">
            <td>
                <div>kaffe</div>
                <div>1</div>
            </td>
            <td>1</td>
        </tr>
    </tbody>
</table>

JQuery Code:

$(".search-reslut-pro").click(function(){
    SearchedProduct(this);
});

function SearchedProduct(id) {
debugger;
    var id = $(id).attr('data-id');
    var name = $(id).attr('data-name');
    var price = $(id).attr('data-price');
    var EmployeeID = $(id).attr('data-EmployeeID');

    alert(id);
}

You can check here [link](http://stackoverflow.com/questions/5431351/inline-event-handler-not-working-in-jsfiddle) — Bharatsing Parmar, May 20 '17 at 10:19

Shubham Baranwal · Answer 3 · 2017-05-20T10:41:18.037

You have to insert your javascript code in head tag and it works as expected.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <script>
    function SearchedProduct(element) {
      debugger;
      var id = $(element).attr('data-id');
      var name = $(element).attr('data-name');
      var price = $(element).attr('data-price');
      var EmployeeID = $(element).attr('data-EmployeeID');
      console.log(id);
    }
  </script>
</head>

<body>
  <table style="width:100%;">
    <tbody>
      <tr style="background-color: #d3d3d3;">
        <td>PRODUCTS</td>
        <td></td>
      </tr>
      <tr class="search-reslut-pro" style="cursor: pointer;" onclick="SearchedProduct(this);" data-employeeid="22" data-id="1" data-name="kaffe" data-price="1">
        <td>
          <div>kaffe</div>
          <div>1</div>
        </td>
        <td>1</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

ReferenceError: SearchedProduct is not defined

3 Answers3