Javascript: Access object's reference variable

Question

I'm not sure if I'm asking this question correctly, but how do I access an object's reference variable?

For example,

var datagrid = new DataBaseGrid();
console.log(datagrid);

DatabaseGrid.prototype.initializeGrid = function(grid) {

    var self = this;
    console.log(self); //self references same object as datagrid

    grid.setCellRenderer("action", new CellRenderer({ 
        render: function(cell, id) {                 
              cell.innerHTML+= "<i onclick=\""+self+".deleteRow("+id+");\" class='fa fa-trash-o' ></i>";
              console.log(cell.innerHTML);
        }
    })); 
};

For cell.innerHTML, I want to replace self with the object reference, datagrid . So the cell's HTML will render as the following if id is 55:

<i onclick="datagrid.deleteRow("55")"; class='fa fa-trash-o' ></i>

Instead, I'm getting an error Uncaught SyntaxError: Unexpected identifier (index):1 when clicking on that element.

The reason why I want to do this is because I have other DataBaseGrid objects that will use initializeGrid, and I don't want to hard-code only one object reference to it.

Answer 1

You're trying to inject an object into a string. The string representation is probably going to look like [object DatabaseGrid] , and the resulting HTML:

<i onclick="[object DatabaseGrid].deleteRow(1);" class='fa fa-trash-o'></i>

Has a syntax error in the onclick . This is an argument for not using inline event handlers or innerHTML ; rather, use the DOM:

var i = document.createElement('i');
i.className = 'fa fa-trash-o';
i.onclick = self.deleteRow.bind(self, id);
cell.appendChild(i);