jquery function to select a button

93
January 01, 2020, at 8:10 PM

How to select the clicked button element in function below with jquery?

HTML
<button class="btn" onclick="increase(2)">Click</button>
Javascript
function increase(id){
}
Answer 1

Try this

<button class="btn" onclick="increase(this)">Click</button>
function increase(thisval){
  console.log(thisval);
  $(thisval).css('background-color', 'red');
}
Answer 2

If you have multiple elements with same class, if you want to go with pure javascript way, try pass element also with value, like this <button class="btn" onclick="increase(this, 1) on click.

function increase(element, value) { 
  element.classList.add('Clicked') 
  console.log(value) 
}
.Clicked { 
  background: red; 
}
<button class="btn" onclick="increase(this, 1)">Click</button> 
<button class="btn" onclick="increase(this, 2)">Click</button> 
<button class="btn" onclick="increase(this, 3)">Click</button> 
<button class="btn" onclick="increase(this, 4)">Click</button> 
<button class="btn" onclick="increase(this, 5)">Click</button>

this return element that you clicked, and you can do what you want, such add class or etc, also second arg return value

Update: And here is jQuery way:

$('.btn').click(function() { 
  $(this).addClass('Clicked') 
  let value = $(this).data('value'); 
  console.log(value) 
});
.Clicked { 
  background: red; 
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<button class="btn" data-value="1">Click</button> 
<button class="btn" data-value="2">Click</button> 
<button class="btn" data-value="3">Click</button> 
<button class="btn" data-value="4">Click</button> 
<button class="btn" data-value="5">Click</button>

Answer 3

You can pass the this

<button class="btn" onclick="increase(this)">Click</button>

function increase(thispass){
  console.log(thispass);
  $(thispass).css('background-color', 'red');
}

Or better yet you can bind the click event to the class and use this, avoiding the unnecessary inline OnClick handler. If you need to pass the increase value you can use a data-attribute in the button element.

<button class="btn">Click</button>

$(".btn").on('click', function(event){
  const inc = parseInt($(this).data('increase'), 10);
  console.log(inc);
});
Answer 4

your first part of question is how to select. You can select clicked button from id so to do this you will assign the id for your button. no need to inline onclick function, well its totally up to you.

<button id= "btn1" class="btn">Click</button>

and here you can do whatever you want.

$(document).ready(function() {
    $("#btn1").click(function(){
        alert("button"); // do increase here
    }); 
});
Answer 5

function increase(ele, id) { 
  console.log("The clicked element's class name is: " + ele.getAttribute("class")); 
  console.log("The clicked element's innerHTML is: " + ele.innerHTML); 
}
<button class="btn" onclick="increase(this,2)">Click</button>

READ ALSO
Dynamically adding media queries to the page and overriding the styles from generated html from Application Side

Dynamically adding media queries to the page and overriding the styles from generated html from Application Side

I have code where i dynamically add custom css to my html on the application side like this:

75
Setting src for image inside an li selected using .eq?

Setting src for image inside an li selected using .eq?

I am trying to set the src of of the first image in the first li to the combination of two variables each containing a stringI tried using:

78
How to grab the values from a slider with jquery

How to grab the values from a slider with jquery

I have a slider that I grabbed from Codepenio here is the link to the slider I am using

95
node.js (npm) openlayers application will behave badly attempting to read a file

node.js (npm) openlayers application will behave badly attempting to read a file

I'm gaining experience with openlayers v6 and NPM (and experience is what you get when you did not get what you wanted)

70