onclick called method is not defined

Question

I have the code running on jsfiddle. The code is below. I can bet a ton of money this is me doing something stupid, but I can't find it.

Clicking on says that Uncaught ReferenceError: showDetail is not defined

I have tried varying adding of parameters as well just to try and troubleshoot. Passing none, one, two doesn't effect the error message.

const lcAppdata = {

    matters: [{
        mid: 100,
        title: "Matter1",
        dateOpened: "01/01/17",
        decedent: "Elvis Presley",
        personalRepresentative: "Alexis Texas",
        attorneyAccountInfo: "John Holmes"
    }, {
        mid: 200,
        title: "Matter2",
        dateOpened: "01/02/16",
        decedent: "Kurt Cobain",
        personalRepresentative: "Kagney Linn Karter",
        attorneyAccountInfo: "Simon Rex"
    }, {
        mid: 300,
        title: "Matter3",
        dateOpened: "01/03/15",
        decedent: "Bob Marley",
        personalRepresentative: "Nikki Benz",
        attorneyAccountInfo: "Ron Jeremy"
    }],
    currentMatter: ''
};


function showDetail(mid){
    console.log(mid);
};

function init(){
    for(let matter of lcAppdata.matters){
    $('#tbodyMatterList').append(`<tr 
            onclick="showDetail(${matter.mid})"> 
            <th scope="row" >${matter.title}</th>
            <td bind>${matter.decedent}</td>
            <td bind>${matter.dateOpened}</td>
            <td bind>${matter.personalRepresentative}</td>
            <td bind>${matter.attorneyAccountInfo}</td></tr>`);

    }


};

init();

Possible duplicate of [Why does this simple JSFiddle not work?](https://stackoverflow.com/questions/7043649/why-does-this-simple-jsfiddle-not-work) — look at the highest voted answer, past the accepted one. — Sebastian Simon, Sep 16 '17 at 17:08
@Sajeetharan clicking on the row is saying the method is not defined, but i have it defined — Pompey Magnus, Sep 16 '17 at 17:15
@RobinMasters If it’s not a duplicate, you need to explain _how exactly_ it is not one. So far, we can’t verify this and the link I provided should definitely fix the error. — Sebastian Simon, Sep 16 '17 at 17:16
You fiddle works when the `LOAD TYPE ` of the Javascript in the fiddle is set to `No wrap - in ` — Manav, Sep 16 '17 at 17:19
I see, you also need to wrap the `init` IIFE in `$(document).ready(function(){`…`});`. — Sebastian Simon, Sep 16 '17 at 17:19
The real solution would be to not append strings with inline JS, but create proper elements with proper event handlers — adeneo, Sep 16 '17 at 17:42
@adeneo can you share a link that explains further what you're saying here? — Pompey Magnus, Sep 16 '17 at 17:52
I'll be your Magnum here, and show you how you'd create element -> https://jsfiddle.net/adeneo/a3v9es4q/ ... how that works with your templates inside JS *(which you should probably also avoid)* I don't know ? — adeneo, Sep 16 '17 at 18:00

score 3 · Accepted Answer · answered Sep 16 '17 at 17:35

You code is fine, it's because of how jsfiddle runs your script. It's set to run the script onLoad i.e. all your code is actually run inside the callback of load event so your function showDetail is not actually defined as a global function, but only local to the load event callback

You can either change your code to attach the showDetail function to the window object to make it global like this

function showDetail() {
  console.log($(this).attr('data-mid'));
};

window.showDetail = showDetail;

or change jsfiddle settings to run your script globally like this

score 0 · Answer 2 · answered Sep 16 '17 at 17:20

You can do it in the following way

function showDetail() {
  console.log($(this).attr('data-mid'));
};


(function init() {
    for (let matter of lcAppdata.matters) {
        $('#tbodyMatterList').append(`<tr data-mid=${matter.mid}><th scope="row" >${matter.title}</th>
        <td bind>${matter.decedent}</td>
        <td bind>${matter.dateOpened}</td>
        <td bind>${matter.personalRepresentative}</td>
        <td bind>${matter.attorneyAccountInfo}</td></tr>`);
    }

    $('#tbodyMatterList tr').click(showDetail);
})();

In JSFiddle you have to init methods in a different way the way you want to achieve it

onclick called method is not defined

2 Answers2