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.

You are trying to convert an object reference to a string. That can't work. Use one of the other ways to bind an event handler. — Felix Kling
– Felix Kling, Commented Dec 28, 2014 at 23:18
That <i> is neither keyboard nor screen reader accessible. To fix keyboard, make it a real <button>. To fix screen reader, you need some sort of text content in addition to the icon. One way is to use aria-label. Fixing both issues: <button onclick="datagrid.deleteRow("55")"; aria-label='delete'><i class='fa fa-trash-o' ></i></button>. — danielnixon
– danielnixon, Commented Dec 29, 2014 at 0:58

icktoofay · Accepted Answer · 2014-12-28 23:44:28Z

4

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);

edited Dec 28, 2014 at 23:44

answered Dec 28, 2014 at 23:19

icktoofay

130k23 gold badges261 silver badges239 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Michael Aaron Safyan Over a year ago

May I suggest using "addEventListener" instead of assigning "onclick"? (Otherwise, nice answer).

icktoofay Over a year ago

@Michael: I would be curious to know why. I used to use addEventListener almost everywhere, but since HTML5’s been standardized, wherever I need only one handler, I’ve been more comfortable using the on* form; it’s a little more concise and works on extremely old browsers (attachEvent, anyone?).

Michael Aaron Safyan Over a year ago

because you never know when some other code is going to temporarily add/remove additional listeners.

icktoofay Over a year ago

@Michael: As long as they’re using the addEventListener/removeEventListener interface for the additional listeners, the onclick will remain working. I think onclick is suitable for use when there’s one clear ‘owner’ of the interactions on that element, and I think such a case applies here.

icktoofay Over a year ago

@user2684075: I can understand the confusion. The bind I am using is actually not the jQuery bind, but rather a different bind built-in to JavaScript. The way I’m using it is sort of a shortcut for function() { self.deleteRow(id); }; what it actually does is it fixes the value of this to self and the first argument to id.

|

Collectives™ on Stack Overflow

Javascript: Access object's reference variable

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related