$(this).addClass for multiple onclick='myfunction()'

user_9424132 0
Viewed 56

This is my code, buttons are creating dynamically

<button class="same_name" onclick='myfunction()'>button name</button>
<button class="same_name" onclick='myfunction()'>button name</button>
<button class="same_name" onclick='myfunction()'>button name</button>
<button class="same_name" onclick='myfunction()'>button name</button>

and I want to add class to button which I clicked

function myfunction()
{
  $(this).addClass("active");
}
html jquery javascript
4 Answers

If you're using jQuery, and you're adding the buttons dynamically, strip out the inline JS, and use event delegation to attach one listener to a parent container to watch for events from your same_name buttons, and then add a class for that clicked button. (I'm using toggleClass in this example.)

$(document).on('click', '.same_name', function () {
  $(this).toggleClass('active');
});
.active { color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="same_name">button 1</button>
<button class="same_name">button 2</button>
<button class="same_name">button 3</button>
<button class="same_name">button 4</button>

user_13770020

Andy's solution is the proper one. If you wish to roll with your own solution, just pass the event to the function.

function myfunction(event){
  let eTar = event.target
  $(eTar).addClass("active");
}
.active { color: red; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="same_name" onclick='myfunction(event)'>button name</button>
<button class="same_name" onclick='myfunction(event)'>button name</button>
<button class="same_name" onclick='myfunction(event)'>button name</button>
<button class="same_name" onclick='myfunction(event)'>button name</button>

user_124765940

Here's the vanilla JS answer (jQuery isn't necessary at all, for almost nothing in 2022):

document.addEventListener('click', function ({target}) {
  if (target.matches('button.same_name')) target.classList.add('active');
});
.active { color: red; }
<button class="same_name">button 1</button>
<button class="same_name">button 2</button>
<button class="same_name">button 3</button>
<button class="same_name">button 4</button>

user_37443040

use toggleClass

$('.same_name').on('click', function () {
  $('.same_name').removeClass('active'); // if you wants to remove class from other buttons
  $(this).toggleClass('active');
});
.active{
  background-color: #000;
  color: #fff
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="same_name active">1</button>
<button class="same_name">2</button>
<button class="same_name">3</button>
<button class="same_name">4</button>

user_142296900
Related