Mixing
jQuery cannot get id from $(this) button click
jQuery cannot get id from $(this) button click
I am trying to use jQuery (this) to get the id of a button clicked and pass that id to a function to do something with. I have three buttons all with different id's and was hoping to use $(this) as I am learning it but cannot get it to work no matter what way I try it
This is the code
jQuery
this
$(this)
<html>
<title>QuizMaster</title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
http://jquery-3.1.0.min.js
function player(x){
var player = x;
console.log(player);
}
$(document).ready(function(){
$('#button').click(function(){
var x = $(this).id;
player(x);
});
});
</head>
<body>
<form id='button'>
<input type='button' id='reset' value='Reset'>
<input type='button' id='player1' value='Player1'>
<input type='button' id='player2' value='Player2'>
</form>
</body>
<html>
6 Answers
6
I think you should listen to input element not #button. And you should get id with .attr()
.attr()
$(document).ready(function(){
$('#button input').click(function(){
var x = $(this).attr("id");
player(x);
});
});
This worked all the suggestions for ('button input') worked so thankyou i was not looking at this part. Did not need attr as it works all ok with this.id
– Steve8428
Jun 29 at 11:20
Happy to know it worked, but I still cannot understand how
$(this).id could work!– Tobia
22 hours ago
$(this).id
Your selector is incorrect and you need to use the attr function to read id, use like this
function player(x){
var player = x;
console.log(player);
}
$(document).ready(function(){
$('#button input[type="button"]').click(function(){
var x = $(this).attr("id");
console.log(x);
player(x);
});
});
<form id='button'>
<input type='button' id='reset' value='Reset'>
<input type='button' id='player1' value='Player1'>
<input type='button' id='player2' value='Player2'>
</form>
https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
<html>
<title>QuizMaster</title>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
function player(x){
var player = x;
console.log(player);
}
$(document).ready(function(){
$('input[type="button"]').click(function(){
var x = $(this).attr('id');
player(x);
});
});
</head>
<body>
<form id='button'>
<input type='button' id='reset' value='Reset'>
<input type='button' id='player1' value='Player1'>
<input type='button' id='player2' value='Player2'>
</form>
</body>
<html>
you should use like this
$(document).ready(function(){
$('input[type=button]').click(function(){
var x = $(this).attr('id')
player(x);
});
});
Maybe Like this:
function player(x){
var player = x;
console.log(player);
}
$(document).ready(function(){
$('#button :button').click(function(){
var x = $(this).attr('id');
player(x);
});
});
https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
<form id="button">
<input type="button" id="eset" value="Reset">
<input type="button" id="player1" value="Player1">
<input type="button" id="player2" value="Player2">
</form>
You may get the id simply referring to the event.target element. Moreover, you don't need to transform the this keyword to a jQuery object and then apply the .attr method: the short form is: this.id.
The snippet:
$(document).ready(function(){
$('#button').on('click', function(e){
var x = e.target.id;
console.log('button pressed is: ' + x);
});
});
https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
<form id='button'>
<input type='button' id='reset' value='Reset'>
<input type='button' id='player1' value='Player1'>
<input type='button' id='player2' value='Player2'>
</form>
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
$(this).attr("id"); also, html ending tag is incorrect and title tag should be inside the head tag.
– Farhan Qasim
Jun 29 at 11:08