jQuery - Modify element with onclick Event

Question

Here's the "almighty code"!

function testFun(target){
  $(this).addClass("element")
  $(target).addClass("target")
}

 
<a href="#" onclick="testFun('.class')" >Element</a>
<div class="class"> </div>

Briefly, upon the onClick event I want to modify the element too! I want to be able to use the same function in multiple situations. Please provide a solution to be able to do the above mentioned.

Rory McCrossan · Accepted Answer · 2015-12-07 13:58:04Z

1

The issue is because this in your testFun() function does not reference the element that called the function - you need to pass in the reference of this:

function testFun(element, target) {
  $(element).addClass("element")
  $(target).addClass("target")
}

.element {
  color: red;
}
.target {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" onclick="testFun(this, '.class')">Target</a>
<div class="class">Target</div>

answered Dec 7, 2015 at 13:58

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

3 Comments

ACN Over a year ago

Is there not a way of using only one parameter?

Rory McCrossan Over a year ago

Not using an onclick attribute, no. If you want to pass the this reference to the event handler function you could instead attach your event with Javascript.

ACN Over a year ago

Your code did the trick, I was only attempting to reach the same thing using only one argument. The way you showed me is the way i originally did it.

Collectives™ on Stack Overflow

jQuery - Modify element with onclick Event

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related