CODEWITHSUNDEEP
javascripthtml
user1283226
user1283226

Reputation: 17

refer to the calling object

I have some div tags and I want to make a JavaScript function that changes the background-color of the div that called the function

function red()
{
this.style.background="red"; // the "this" keyword doesn't refer to the calling object
}

And I have a lot of div tags like this

<div id="one" onclick="red()"></div>
<div id="two" onclick="red()"></div>
<div id="three" onclick="red()"></div>

Is there a way to make it happen or should I put a function for each div like this

function somename()
{
document.getElementById(id of the div that calls the function).style.background="red";
}

I don't want put alot of functions because I have too many div tags

Upvotes: 1

Views: 126

Answers (5)

Hkachhia
Hkachhia

Reputation: 4539

you can pass object in function like

<div id="one" onclick="red(this)"></div>

 function red(element)
{
    element.style.background="red";
}

Upvotes: 1

RobG
RobG

Reputation: 147553

If you attach the listener dynamically, the function will be called with the target element as this:

<script>

function showId() {
  alert(this.id);
}

window.onload = function() {
  document.getElementById('foo').onclick = showId;
}

</script>

<div id="foo">foo</div>

You can also use addEventListener, it's a little more work to get it to work with attachEvent, but not much:

function showId() {
  alert(this.id);
}

function addListener(el, evt, fn) {
  if (el.addEventListener) {
    el.addEventListener(evt, fn, false);
  } else if (el.attachEvent) {
    el.attachEvent('on'+evt, function() {
      fn.call(el);
    });
  }
}

window.onload = function() {
  addListener(document.getElementById('foo'), 'click', showId);
}

There are many versions of the addListener function, the above is a simple one.

Upvotes: 0

ZER0
ZER0

Reputation: 25332

When you define event handler as HTML attribute like that:

<div id="one" onclick="red()"></div>

You have actually having an anonymous function that executes the code in the attribute. It's basically equivalent to:

element.onclick = function(event) {
    red();
}

You can clean your HTML and have a better separation from JS and HTML defines the handler directly in the JS code. Something like:

document.getElementById("one").onclick = red;

In that case this will be the element that fired the event. Notice that in the browser that supports standards, is better use addEventListener. For the records, in jQuery you will have something like:

$("#one").click(red);

Upvotes: 0

Joseph
Joseph

Reputation: 119887

you just needed to pass the element that called it

<div id="one" onclick="red(this)"></div>

function red(element){
    element.style.background="red";
    var id = element.id;
}

Upvotes: 2

jAndy
jAndy

Reputation: 236202

You would need to set the correct context for your function red(). You can either accomplish that with Function.prototype.call or Function.prototype.apply. Like

<div id="one" onclick="red.call(this)"></div>

example: http://jsfiddle.net/dFLCD/

Upvotes: 2

Related Questions