Uncaught ReferenceError: x is not defined at HTMLTableRowElement.onclick

I've looked around for a solution but I might just be missing something really obvious because they don't solve my issue. I am no JS wiz at all, just a disclaimer.

I have an ASP project where JavaScript calls some C# code some times. I start my code with this:

window.onload = function () { LiveSearch(); getCredentials(); getAllUsers(); getIsAdmin(); }; 

All of these functions work just fine. But the one of interest is getAllUsers() because it contacts the backend via an AJAX call to get some data to fill in a table.

function getAllUsers() { var result_body = ""; $.ajax({ type: 'GET', url: '/Home/GetAllUsers', dataType: 'json', cache: false, contentType: 'application/json; charset=utf-8', data: JSON.stringify(""), success: function (users) { PushToScope("users", users); var dict = scope[2]; if (dict.key.length > 0) { for (var key in dict.value) { result_body += '<tr onclick="getClickedUserObject(' + dict["value"][key].Initials + ')\">'; result_body += '<td class=\"col-xs-4\">' + dict["value"][key].Name + '</td>' result_body += '<td class=\"col-xs-4\">' + dict["value"][key].Title + '</td>' result_body += '<td class=\"col-xs-4\">' + dict["value"][key].Department + '</td>' result_body += '<td style=\"display: none\">' + dict["value"][key].PrivatePhone + '</td>' result_body += '<td style=\"display: none\">' + dict["value"][key].WorkEmail + '</td>' result_body += '<td style=\"display: none\">' + dict["value"][key].WorkPhoneLandline + '</td>' result_body += '<td style=\"display: none\">' + dict["value"][key].WorkPhoneMobile + '</td>' result_body += '</tr>'; } } else { result_body += '<tr>'; result_body += '<td style=\"col-xs-12\"><b>No Data. Try again, or Contact IT Support.</b></td>'; result_body += '</tr>'; } $('#result-table').html(result_body); } }); } 

Like I said, the above works, but the problem comes forth when I click an element in my table. "getClickedUserObject()" below:

function getClickedUserObject(lettercode) { if (lettercode != undefined) { var users = scope[2]; var user = users["value"][lettercode]; $('#result-title').html(user.Title); $('#result-name').html(user.Name); $('#result-department').html(user.Department); $('#result-email').html('<a href=\"mailto:' + user.WorkEmail + '\">' + work.WorkEmail + '</a>'); $('#result-work-mobile').html(user.WorkPhoneMobile); $('#result-work-landline').html(user.WorkPhoneLandline); $('#result-private-mobile').html(user.PrivatePhone); if (lettercode == scope[0]) { $("#HidePrivate").show(); $("#HidePrivate").disabled = false; $("#HidePrivate").checked = user.HiddenPrivatePhone; } else { $("#HidePrivate").hide(); $("#HidePrivate").disabled = true; } } return false; } 

This function never fires, instead I get the error in the title, saying that whatever lettercode I would get from clicking a row is not defined. This is odd to me because looking in the Google Chrome inspector I see this:

So what gives?