Question

Is there a way to get the parent object of a function? Like which object activated the function?
Here’s the JS

var ua=false
function toggleUA() {

if (ua==false)

{document.getElementById("ua").src="http://i805.photobucket.com/albums/yy331/NatFan/uamap.png";ua=true;}
else
{document.getElementById("ua").src="http://upload.wikimedia.org/wikipedia/commons/8/8c/Transparent.png";ua=false;} }

Here’s the HTML

<img class="airline" id="ua" src="http://upload.wikimedia.org/wikipedia/commons/8/8c/Transparent.png" width="1500" height="744">
<table class="nav">

<tr>

<td class="star" onclick='toggleUA();'>United Airlines</td>

</tr>

</table>

So If I wanted to have the table cell change colors when i click it, how would I do that?

Answer 1

I think the safer way is to pass this to the function call as the first argument, and then use that to manipulate it. Such as:

<td class="star" onclick='toggleUA(this);'>United Airlines</td>

And then the Javascript function would be declared as:

function toggleUA(obj) {

Where obj is the <td> that was clicked (in case you use this on several <td> elements).

Now, normally the way event listeners works is that you can usually reference this in the function automatically without having to pass it as an argument, but the way inline event handlers works isn’t the same, and you need to pass this.

UPDATE:

To modify the background color or other style properties, you can use the .style property of the element. With this, you should be able to modify any CSS property, and for background color, use:

this.style.backgroundColor = "#fff";

https://developer.mozilla.org/en-US/docs/DOM/element.style